AngularJS Getting Started Tutorial (1) - A brief introduction to routing usage-JS Tutorial-php.cn

AngularJS Getting Started Tutorial (1) - A brief introduction to routing usage

黄舟

Release： 2017-05-27 10:33:39

Original

869 people have browsed it

This article mainly introduces Angular JS routing usage, and briefly analyzes the concept, function and basic usage of AngularJS routing For the method, friends who need it can refer to

The examples in this article describe the usage of AngularJS routing. Share it with everyone for your reference, the details are as follows:

According to the current understanding, this NG routing module can be used for single-page development with multiple views.

First post all the codes:

HTML:

<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body ng-app=&#39;routingDemoApp&#39;>
<h2>AngularJS 路由应用</h2>
<ul>
  <li><a href="#/" rel="external nofollow" >首页</a></li>
  <li><a href="#/computers" rel="external nofollow" >电脑</a></li>
  <li><a href="#/user" rel="external nofollow" >用户</a></li>
  <li><a href="#/blabla" rel="external nofollow" >其他</a></li>
</ul>
<p ng-view></p>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="test.js"></script>
</body>
</html>

Copy after login

list.html：

<p>
  <h1>HI,这里是list.html</h1>
  <h2>{{name}}</h2>
</p>

Copy after login

JS:

var app = angular.module(&#39;routingDemoApp&#39;,[&#39;ngRoute&#39;]);
app.config([&#39;$routeProvider&#39;, function($routeProvider){
    $routeProvider
      .when(&#39;/&#39;,{template:&#39;这是首页页面&#39;})
      .when(&#39;/computers&#39;,{
        template:&#39;这是电脑分类页面&#39;
      })
      .when(&#39;/user&#39;,{templateUrl:&#39;list.html&#39;,controller:&#39;listController&#39;})
      .otherwise({redirectTo:&#39;/&#39;});
}]);
app.controller(&#39;listController&#39;,function($scope){
  $scope.name="ROSE";
});

Copy after login

First of all, since I am using Angular1.5, I need to introduce additional angular-route.js:

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>

Copy after login

To To use routing in NG, you must first define it in a specific module:

.config([&#39;$routeProvider&#39;, function($routeProvider){
//内容
}

Copy after login

Use the when and otherwise methods to match routes. (In fact, it matches the / character after the URL above). Finally, put the field or file corresponding to the matched character into the DOM with the ng-view directive.

when there are many properties in it. You can set Controller inside, and the controller will match the corresponding field or file. Just like the listController controller in the above code.

ng-view directive has many rules:

When matching routes:

1. Create a new current scope.
2, Delete the previous scope.
3. Associate the current template (controller, etc.) with the currently newly created scope.
4. If there is a built-in associated controller, associate it with the current scope.

The above is the detailed content of AngularJS Getting Started Tutorial (1) - A brief introduction to routing usage. For more information, please follow other related articles on the PHP Chinese website!