为什么做的网站别的浏览器打不开怎么回事,天河岗顶棠下上社网站建设公司,长沙景点怎么预约,厦门市住房与城乡建设局网站本文也同步发表在我的公众号“我的天空” AngularJS路由 AngularJS路由可以让我们通过不同的URL访问不同页面#xff08;似乎是废话#xff09;#xff0c;其价值主要体现在单页面的web应用中#xff08;single page web application#xff0c;SPA#xff09;#xff0…本文也同步发表在我的公众号“我的天空” AngularJS路由 AngularJS路由可以让我们通过不同的URL访问不同页面似乎是废话其价值主要体现在单页面的web应用中single page web applicationSPA在移动端的web开发中几乎都是SPA的形式。我们先通过一个简单的示例来了解AngularJS路由随后再做进一步的学习。请看示例 html head titleAngularJS_23/title script srcAngular.js/script script srcangular-route.min.js/script /head body ng-appmyApp ul lia href#/首页/a/li lia href#/news新闻/a/li lia href#/sport体育/a/li /ul div ng-view/div /body script var appangular.module(myApp,[ngRoute]); app.config(function($routeProvider){ $routeProvider .when(/,{template:这是首页}) .when(/news,{template:这是新闻页面}) .when(/sport,{template:这是体育页面}) .otherwise({redirectTo:/}); }); /script/html 示例代码AngularJS_23.html
运行该页面当点击不同的链接时在DIV中显示不同的内容。分析以上代码看看我们新增加了哪些部分 首先AngularJS路由功能的实现是在anguler-route中实现的所以我们引入了angular-route.min.js。其次我们观察a标签里的href地址格式其均是由#开头的AngularJS中URL的形式是通过“# 标记”来实现的。随后在显示内容的DIV中我们使用了ng-view指令该DIV可以看成一个容纳页面的容器。另外在控制器代码中由于要引入外部模块所以我们在模块app的声明中引入了“ngRoute”。 接下来便是实现路由的关键代码app.config()AngularJS通过config函数来配置路由我们将$routeProvider引入到配置函数config()并通过$routeProvider的when()或otherwise()函数来定义我们的路由规则函数包含两个参数第一个是URL或URL正则第二个为路由配置对象由于本例中只是简单的显示些文字因此直接设置template就可以了。otherwise()函数定义所有未在when()中配置路由的其他url的路由规则本例中直接设置redirctTo参数。 接下里我们学习路由配置对象由于上一例中我们只是简单的演示路由因此路由配置对象设置的比较简单完整的路由配置对象格式为 $routeProvider.when(url, { template: string, templateUrl: string, controller: string, function 或 array, controllerAs: string, redirectTo: string, function, resolve: objectkey, function}); 各参数说明template如果我们只需要在ng-view中显示简单的html内容就使用该参数如上一例所示。templateUrl如果需要在ng-view中显示页面则该参数为页面的url。controller在当前模板上执行的controller函数。controllerAscontroller函数的别名。redirectTo重定向的地址如上一列中的otherwise()函数所示。resolve指定当前controller所依赖的其他模块。 接下里我们演示一个更复杂的示例我们先准备两个子页面 h1这是新闻页面/h1ulli ng-repeatnew in news{{new}}/li/ul 示例代码route_news.html h1这是体育页面/h1ulli ng-repeatsport in sports{{sport}}/li/ul 示例代码route_sport.html 由于子页面是嵌套在主页面的ng-view中所以只需要DOM元素就可以了这两个页面都很简单使用ng-repeat来展示相应数组的内容这个是我们之前已经掌握的知识点了。 接下来是主页面 body ng-appmyApp ul lia href#/首页/a/li lia href#/news新闻/a/li lia href#/sport体育/a/li /ul div ng-view/div /body script var appangular.module(myApp,[ngRoute]); app.controller(ctr_news,function($scope){ $scope.news[新闻一,新闻二]; }) .controller(ctr_sport,function($scope){ $scope.sports[体育内容一,体育内容二]; }) .config(function($routeProvider){ $routeProvider .when(/,{ template:这是首页 }) .when(/news,{ templateUrl:route_news.html, controller:ctr_news }) .when(/sport,{ templateUrl:route_sport.html, controller:ctr_sport }) .otherwise({redirectTo:/}); }); /script 示例代码AngularJS_24.html 主页面的html部分与之前的示例完全一样我们主要看控制器代码中。首先在config()函数中我们在“新闻页面”与“体育页面”的路由配置中使用了templateUrl来加载子页面同时用controller来设置了其相应的控制器新闻页面的控制器名为“ctr_news”这样我们就可以在主页面中通过控制器“ctr_news”来访问并设置新闻页面的DOM了在这里我们是初始化了一个数组“news”,这样在子页面中就可以使用该数组并渲染新闻页面里的li元素同时体育页面的处理也完全一样。 app.controller(ctr_news,function($scope){ $scope.news[新闻一,新闻二]; }) 当然我们也可以不对子页面设置单独的控制器而是统一由主页面的控制器处理不过这样不利于整体代码的架构不建议这样写。 body ng-appmyApp ng-controllerctr ul lia href#/首页/a/li lia href#/news新闻/a/li lia href#/sport体育/a/li /ul div ng-view/div /body script var appangular.module(myApp,[ngRoute]); app.controller(ctr,function($scope){ //所有的数据在主页面的控制器中来处理 $scope.news[新闻一,新闻二]; $scope.sports[体育内容一,体育内容二]; }) .config(function($routeProvider){ $routeProvider .when(/,{ template:这是首页 }) .when(/news,{ templateUrl:route_news.html }) .when(/sport,{ templateUrl:route_sport.html }) .otherwise({redirectTo:/}); }); /script 示例代码AngularJS_25.html 该系列的示例代码 https://github.com/panyongwow/angularJS 更多专业前端知识请上
【猿2048】www.mk2048.com
