Angularjs 路由之初识

来源：互联网发布：当今网络强国有哪些编辑：程序博客网时间：2024/05/16 23:35

Angularjs 路由之初识
官方推荐的模块切分方式，可以参考
这里写图片描述
项目目录如下

index.html中写如下代码

<!DOCTYPE html><html ng-app="app"><head><script src="js/1.3.20/angular.js"></script><script src="js/1.3.20/angular-route.js"></script><script src="js/app.js"></script><script src="js/controller.js"></script>  <meta charset="utf-8">  <title>app</title></head><body> <div ng-view>    </div></body></html>

这是项目的入口文件ng-view是定义视图标签，需要引入的分别是angular的主文件，route路由模块，自定义的app和控制器controller文件，然后在app.jszh中写如下

var app = angular.module("app", ['ngRoute','Ctrls']);app.config(function($routeProvider) {    $routeProvider.when('/hello', {        templateUrl: 'tpl/hello.html',//模版地址        controller: 'HelloCtrl'//模版指向的控制器    }).when('/list',{        templateUrl:'tpl/bookList.html',        controller:'BookListCtrl'    }).otherwise({        redirectTo: '/hello'    })});//['ngRoute','Ctrls'])是加载的模块，模块需用引号和逗号隔开,后面的config就是根据网址进行相应的判断，然后进入相应的控制器

controller控制器代码如下

var Ctrls = angular.module("Ctrls", []);Ctrls.controller('HelloCtrl', ['$scope',    function($scope) {        $scope.greeting = {            text: 'Hello'        };    }]);

做的很简单的页面显示
在模版中只需写简单的一行代码就可以出来效果

<p>{{greeting.text}},Angular</p>

效果如下
这里写图片描述
这是一个简单的angular的路由，初识angular,觉得很强大，期待深入学习。

1 0