Home > Developer > Web Develop
This experience Angularjs's Hello World, though simple, embodies some important concepts of ANUGLARJS.
The general idea is this:
Some features are typically implemented by adding ANGULARJS unique properties to the HMTL element, such as Ng-app, ng-controller
In JS, it is usually necessary to register a module and then register the Controller for module. Angularjs not only have angular.js files, there are other JS files, such as the Angular-route.js file for routing configuration, etc., each file contains a module, The process of using ANULARJS is to make these modules work together .
First introduce Angularjs's core JS file on the page:
<script src= "Angular.min.js" ></script>
Next, register a modulein the definition JS file for the current page:
var myApp = angular.module ("HelloApp", [])
Above, the module name is HelloApp, and the [] array is used to store other modules that are dependent on the current module, such as [' Ngroute ', ' ... '].
Then, register the Controller for the module.
Myapp.controller ("testcontroller", [' $scope ',function($scope) {$scope. Hello = "hello world!";
}]);
Above, the first parameter of the controller () is the name of the controller, the array of the second parameter, the last element of the array must be an anonymous function, the other element is the global service of the Angularjs, or the global object. It is important to note that the location and name of the global service in the array must correspond to the parameter one by one of the anonymous function .
We can also write this:
Myapp.controller ("testcontrollerfunction($scope) {$scope. Hello = "hello world!";
});
However, the above notation in the optimization of the JS file compression, will change the name of the $scope variable, such as substituting for a, because ANGULARJS only recognize $scope do not know A, this will lead to error. Therefore, this method is not recommended.
In addition, the global service is used by the current controller in an injected manner. In Angularjs, Many of the global service is used in the form of dependency injection .
Finally, there are 3 things to do on the page.
1. Use Ng-app to declare the name of the current module
2. Use Ng-controller to declare the controller you need to use
<body ng-controller= "TestController" >
3. Use {{}} to display variables in $scope
<p>{{hello.name}}</p>
The complete code is as follows:
<!doctype html>
helloapp" >
<meta charset= "UTF-8" ><title>untitled document</title><script src= "angular.min.js" ></script><script>var myApp = Angular.module ("helloapp", [])Myapp.controller ("testcontroller", [' $scope ',function($scope) {$scope. Hello = "hello world!";}]);</script><body ng-controller= "testcontroller" ><p>{{hello}}</p></body>Of course, the $scope variable in the actual project is usually used to store the object. Like what:
var myApp = Angular.module ("helloapp", [])Declaring an object and assigning it a valuevar messages = {};Messages. name = ' Hello world! ';Myapp.controller ("testcontroller", [' $scope ',function($scope) {$scope. Hello = messages;}]);In the page, call as follows:
<p>{{hello.name}}</p>
Of course, the same as the above:
<p ng-bind= "Hello.name" ></p>
Summary: The key words left to us are: module, the synergy and dependency between module, controller, global service dependency injection.
Angularjs's Hello World
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
