你的位置:首页 > Java教程

[Java教程]关于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