Home > Developer > Web Develop
(a) Hello Angular
Index.html
<!DOCTYPE HTML><HTMLNg-app> <Head> <title>Test AngularJS</title> <MetaCharSet= "Utf-8"> </Head> <Body> <DivNg-controller= "Helloangular"> <P>{{Greeting.text}},angular</P> </Div> </Body> <Scriptsrc= "Js/angular.min.js"></Script> <Scriptsrc= "Controller/helloangular.js"></Script></HTML>
Helloangular.js
function Helloangular ($scope) { = { ' Hello ' };}Angular.min.js
This file is on the Internet anywhere next, such as Sina's Front end library address: Http://lib.sinaapp.com/js/angular.js/angular-1.1.0/angular.min.js
Min is the compressed file, in the INDEXL directly into the link can be, but still download to local convenience?
Open the Index.hml in the browser and look at the output.
PS: The use of Ng-controller in the above index.html a little bit of a problem, that is, quickly refresh the page or a lot of data when there will be a short time to display {{Greeting.Text}}, we can solve by the following way.
< P > {{greeting.text}},angular</p>Replace the above sentence in the index.html.
< P >< ng-bind= "Greeting.Text"></span>, Angular< /P>
"Angular" is displayed instead of "{{greeting.text}},angular") when the page is not loaded.
(b) wrong controller use method
Do not use universal controllers, inheritance or invocation, etc., each controller is responsible for only a small part of the logic can
The following controller and home page reference codes are not recommended for use in the sample:
Html
<DivNg-controller= "Commoncontroller"> <DivNg-controller= "Controller1"> <P>{{Greeting.Text}}, Angular</P> <ButtonNg-click= "test1 ()">Click1</Button> </Div> <DivNg-controller= "Controller2"> <P>{{Greeting.Text}}, Angular</P> <ButtonNg-click= "test2 ()">Click2</Button> </Div> <ButtonNg-click= "Common ()">Common</Button></Div>
Controller
functionCommoncontroller ($scope) {$scope. Common=function() {alert ("Common"); };}functionController1 ($scope) {$scope. greeing={text:' Hello1 ' }; $scope. Test1=function() {alert ("Test1"); };}functionController2 ($scope) {$scope. greeing={text:' Hello2 ' }; $scope. Test2=function() {alert ("Test2"); };}
Although it works, it is recommended to abstract public code into a "service".
(iii) display of Ng-model
<!DOCTYPE HTML><HTMLNg-app> <Head> <title>Test AngularJS</title> <MetaCharSet= "Utf-8"> </Head> <Body> <Div> <inputNg-model= "QQ" /> <P>{{QQ}}</P> </Div> </Body> <Scriptsrc= "Js/angular.min.js"></Script></HTML>
The above is the effect, enter what below will be synchronized display what
(d) Ng-replat
The following code fragment is a simple loop
< Div > < ol > < ng-repeat= ' name in Names '> {{name}} from {{Department} } </li></ol></ Div >Global rootscope can be defined, which is globally available
function Creetctrl ($scope, $rootScope) { = ' Angular ';} function Listctrl ($scope) { = [' David ', ' Dong ', ' Sellea '];}(v) Routing, module, dependency injection
(a) The controller in the definition is a global variable, this is not good, and also not modular
var hellomodule = angular.module (' helloangular ', []); Hellomodule.controller (function ($scope) { = { ' Hello ' };}]);Routing comes with the same, but using angular-ui-router This module will be better
The function of dependency injection makes the ANGULARJS easy to introduce the module, and realizes the function when the minimum quantity module is introduced.
Hello World will write, then learn some two-way data binding, these concepts are the first time to hear, Angularjs is really a very interesting thing
ANGULARJS Study Notes (i)--some basic knowledge
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
