Home > Article > Web Front-end > Introduction and usage of AngularJS "routing"

Introduction and usage of AngularJS "routing"

巴扎黑Original: 2017-07-21 14:05:301318browse

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

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>

3. Analysis

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

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

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

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就好

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Knockoutjs+select2 personnel search function code sharingNext article：Knockoutjs+select2 personnel search function code sharing

See more

Introduction and usage of AngularJS "routing"

Related articles