AngularJS关于Angular.js Routing 的就学笔记(完结单页应用)

近期伊始学习angular.js,发现angular.js确实很有利,也很强劲。在观望AngularJS Routing and Multiple Views
这一部分的时候,有点乱。未来透过记录一下读书进程中写的事例,让投机美辛亏明白一下。

 

第一步:

①创设二个名为“myApp”的模块,并且加载“ngRoute”作为依靠模块

②使用$routeProvider安排路由

③在那个事例中,笔者动用了五个途径,分别是/home/about ;使用了三个控制器(不加控制器也行,首即便用于操作数据),为myController

js代码如下:

 1 var myApp = angular.module("myApp", ["ngRoute"]);
 2 
 3 myApp.config(function($routeProvider) {
 4     $routeProvider
 5         .when("/home", {
 6             templateUrl: "home.html",
 7             controller: "myController"
 8         })
 9         .when("/about", {
10             templateUrl: "about.html",
11             controller: "myController"
12         })
13         .otherwise({
14             redirectTo: "/home"
15         });
16 });
17 
18 myApp.controller("myController", function($scope) {
19    $scope.message = "Hello World !"
20 });

 

第二步:

编辑html的template视图模板

home.html代码如下:

<h1>{{message}}</h1>
<h2 >This is home page!</h2 >
<a href="#/about">Go to about page</a>

 

 

about.html代码如下:

<h2>This is about page!</h2>
<a href="#/home">Go to home page</a>

 

说到底一步:

①创办三个index.html文件,在所急需的竹签内添加ng-app,
属性设为“myApp”,用来控制angular的适用范围

②添加ngView标签,用于存放模版视图

③导入 angular.min.js 、 angular-route.min.js
、以及和谐编辑的js文件

 

index.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS-Routing</title>
</head>
<body>
    <div ng-app="myApp">
        <ng-view></ng-view>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

 

 

注意事项:

①在概念module的时候,记得加上“ngRoute”

②在安插路由的时候,.when()
方法有三个参数。第①个参数是浏览器访问的url路径,不必要加上“#”符号(不过在a标签设置href的时候,要把“#”符号加上);第3个参数包蕴有template和controller,templateUrl的门径则是文件所在的其实路径。

 

参照网站:http://www.journaldev.com/6225/angular-js-routing-and-multiple-views-tutorial-example\#/viewStudents

 

相关文章