至于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的上,要把“#”符号加上);第二独参数包括发生template和controller,templateUrl的路子则是文本所在的实际路径。

 

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

 

相关文章