Home > Developer > Web Develop
Introduction of ANGULARJS Framework:
Angularjs is a JS framework that can easily implement an application development, which is characterized by modularity, bidirectional binding of data and dependency injection, etc.
Modularity: The concept of a module in the Angularjs, that is, each module must be controlled by a controller, the controller in the application has a unique name;
Two-way binding: The data assigned to the variable in the controller is implemented through a channel ($scope) to connect between the view and the controller, and the view updates the $scope as soon as the data is modified, and the view is re-rendered as soon as the $scope changes;
Dependency Injection: A function similar to the one in the C language must be declared before it is used in this file, and the service to be used in each controller (which can be understood as a function) is declared at the beginning as a parameter;
Second, the route
$route Service is a service in Angularjs, the function is to declare the container and its corresponding controller correspondence, because of the existence of the container, with the routing, so that the application actually become a single-page application, in an HTML page to declare all the controller, and set a container for the program, Different containers call different controllers to implement different functions, switch the container to achieve the effect of switching function, the page is displayed as the Switch page.
III. Construction of the framework
First, declare your app in an HTML file:
<HTMLNg-app= "MYAPP"><Head> <MetaCharSet= "Utf-8"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>My AngularJS App</title> <Metaname= "description"content=""> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1"> <Linkrel= "stylesheet"href= "Css/style.css"> <Scriptsrc= "Lib/angular/angular.min.js"></Script> <Scriptsrc= "Lib/angular/angular-ui-router.min.js"></Script> <Scriptsrc= "Js/app.js"></Script> <Scriptsrc= "Module/mainctrl.js"></Script> <Scriptsrc= "Module/tab.index/indexctrl.js"></Script> <Scriptsrc= "Hjx/homectrl.js"></Script> <Scriptsrc= "Hjx/backgroundctrl.js"></Script></Head><BodyNg-controller= "Mainctrl"> <DivUi-view></Div></Body></HTML>
Declare the app name MyApp with the Ng-app command and then, like any other HTML file, declare the referenced presentation file, script file, etc., and then declare the controller files for each module Here, you must first introduce the Angularjs.min.js file, and then refer to the Angular-ui-router.min.js file, which relies on the former;
Declare the controller for this HTML file, named Mainctrl; Declare the container of the view in a div tag in the inner layer, and each of the next views will be placed in the DIV tag.
Then, configure the route:
1 varMyApp = Angular.module ("MyApp", [' Ui.router ']);2Myapp.config (function($stateProvider, $urlRouterProvider) {3$urlRouterProvider. Otherwise (' background ');4 //$stateProvider. Otherwise ("Home");5 $stateProvider6. State ("Home", {7URL: "/home",8Templateurl: "Hjx/home.html",9Controller: ' Homectrl 'Ten }) One. State ("Background", { AURL: "/background", -Templateurl: "Hjx/background.html", -Controller: ' Backgroundctrl ' the }) -. State ("tabs", { -URL: "/tabs", -Templateurl: "Module/tabs.html" + }) -. State ("Tabs.index", { +URL: "/index", ATemplateurl: "Module/tab.index/index.html", atController: ' Indexctrl ' - }) -. State ("Tabs.view", { -URL: "/view", -Templateurl: "Module/tab.view/view.html" - }) in. State ("single", { -URL: "/single", toTemplateurl: "Module/single/single.html" + }); - //$stateProvider. Otherwise ("Home"); the});
Use the App. config () function to configure routing for your application, which injects the $stateprovider and $urlrouterprovider services, and it should be explained that the Angularjs tutorial only uses $stateprovider to configure routing to not succeed , the error message is injected, so the $urlrouterprovider service is introduced, and when no view is selected, jumps to the view indicated by $urlrouterprovider.otherwise (' background '). The configuration syntax for a route, like a switch statement, is to display the corresponding view when the state is satisfied with any state, and to invoke the corresponding view's controller, thus enabling the page to jump, but in fact a state jump.
The path shown in Url:url
Templateurl: Template (view) path
Controller: Template (view) for the corresponding controllers
Because this file has already been referenced in the index.html file, that is, when the reference is loaded, the application already knows the controller, and when needed, the controller is called.
No, only correspondence, there is no relationship, the template corresponding to the controller, corresponding to the path shown. Just like every case in a switch statement has no precedence, but each case corresponds to a piece of code that needs to be executed.
Yes, just like the default of the switch statement can be written in front or write back.
Finally, write the various views:
Each view you write can be divided into folders according to the function module, each of the written controller, there is a unique name. And for convenience, it is referenced directly in the index.html file.
It is worth mentioning that, in order to be able to easily jump to each state, you can add a menu bar outside the View container in the index.html, so that the menu bar does not jump with the state to disappear, it is convenient to jump freely. This design is the same as the design of many official website, this shows that this kind of design is very practical.
Building the ANGULARJS framework for leading the way
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
