search

Home >Web Front-end >JS Tutorial >AngularJS Getting Started Tutorial (1) - A brief introduction to routing usage

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

黄舟
黄舟Original
2017-05-27 10:33:39894browse

This article mainly introduces AngularJSrouting 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>

list.html： 

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

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";
});

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>

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

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

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!

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：Sample code sharing about angularJS modal box $modalNext article：Sample code sharing about angularJS modal box $modal

Related articles

See more