Introduction and usage of AngularJS 'routing'-H5 Tutorial-php.cn

Introduction and usage of AngularJS 'routing'

巴扎黑

Release： 2017-07-21 14:05:30

Original

1289 people have browsed it

These are some study materials compiled by the editor. In theory, they are only for your own future study needs, but they still need to be taken seriously.

The following content is for reference only, please use and study with caution

The definition concept of "routing" in AngularJS

AngularJS is really popular recently. Many colleagues, classmates and friends are using it. Isn't this right? Recommended for me to learn. I was very excited when I heard the name.

I won’t explain what AngularJS is. This thing is still very interesting.

Recommend a learning website and a novice tutorial here. , although many of the tutorials in it are very simple, and many of them are not explained, it is really a good choice for getting started

1. What is AngularJS routing?

AngularJS routing allows us to access different content through different URLs. Multi-view single-page web applications can be implemented through AngularJS

1 3 5

Copy after login

The above is its presentation form. Does the content after the number # look like the server request? In fact, in the request Sometimes it will be ignored by the browser. What we need is to implement the function of the content after the # number on the client. AngularJS routing uses # + tag to help us distinguish different logical pages and bind different pages to the corresponding controllers.

2. Routing Configuration Example

 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4  5 <!--导入angular以及路由文件angular-route.js--> 6 <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js?1.1.11"></script> 7 <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js?1.1.11"></script> 8  9     <script type="text/javascript">10         //把元素值（比如输入域的值）绑定到应用程序。11         angular.module('ngRouteExample', ['ngRoute'])12         .controller('a1', function ($scope, $route) { $scope.$route = $route;})13         .controller('a2', function ($scope, $route) { $scope.$route = $route;})14         .config(function ($routeProvider) {15             $routeProvider.16             when('/a1', {17                 templateUrl: 'a1.html',18                 controller: 'a1'19             }).20             when('/a2', {21                 templateUrl: 'a2.html',22                 controller: 'a2'23             }).24             otherwise({25                 redirectTo: '/a2'26             });27         });28 </script>29 30   31 </head>32 33     <body ng-app="ngRouteExample" class="ng-scope">34           <script type="text/ng-template" id="a1.html">35               <h1> Home </h1>36           </script>37     38           <script type="text/ng-template" id="a2.html">39               <h1> About </h1>40           </script>41     42           <div> 43             <div id="navigation">  44               <a href="#/a1">这是a1</a>45               <a href="#/a2">这是a2</a>46             </div>47               48             <div ng-view="">49             </div>50           </div>51     </body>52 </html>

Copy after login

3. Analysis

1 //包含了ngRoute 模块的2 angular.module('routingDemoApp',['ngRoute'])

Copy after login

1 //使用 ngView 指令，用来显示路由切换的页面2 <div ng-view></div>

Copy after login

 //                // //redirectTo，重定向的地址，可以是你想最开始加载的页面

Copy after login

1  <script type="text/ng-template" id="a1.html">2               <h1> Home </h1>3           </script>4     5           <script type="text/ng-template" id="a2.html">6               <h1> About </h1>7           </script>8 //这里的加载内容可以使本地的HTML文件链接，然后删掉这部分js就好

Copy after login

Just create two local HTML files directly as a1.html and a2.html. The paths must be correct (here they are placed in the same directory)

4. Effect style

So what is the final look like

Click on different tags, and the following ng-view=""> will load different pages. The pages here can be local pages.

The above is the detailed content of Introduction and usage of AngularJS 'routing'. For more information, please follow other related articles on the PHP Chinese website!