搭建带路由的AngularJs框架
Posted 新羽
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了搭建带路由的AngularJs框架相关的知识,希望对你有一定的参考价值。
一、AngularJs框架简介:
AngularJs是一种能够轻松实现一个应用开发的JS框架,其较为突出的特点是:模块化、数据的双向绑定和依赖注入等等。
模块化:AngularJs中存在模块的概念,即每个模块必须由一个控制器来控制,控制器在应用中具有唯一一个名称;
双向绑定:将控制器中赋值给变量的数据通过一个通道($scope)实现视图(view)和控制器(controller)之间的连接,视图在修改数据时会立刻更新$scope,同样的$scope发生改变时也会立刻重新渲染视图;
依赖注入:类似于C语言中文件外的函数在本文件中使用前,必须先声明一样,每一个控制器中所要用到的服务(可以理解为函数)都要在开头作为参数声明;
二、路由
$route服务是AngularJs中的一个服务,作用是声明容器和其对应的控制器的对应关系,由于容器的存在,配合路由,使得应用实际上变成一个单页面应用程序,在一个html页面中声明所有控制器,并为程序设置一个个容器,不同的容器调用不同的控制器实现不同功能,切换容器达到切换功能的效果,页面上显示为页面的切换。
三、框架的搭建
首先,在一个HTML文件中声明你的应用:
<html ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>My AngularJS App</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css"> <script src="lib/angular/angular.min.js"></script> <script src="lib/angular/angular-ui-router.min.js"></script> <script src="js/app.js"></script> <script src="module/mainCtrl.js"></script> <script src="module/tab.index/indexCtrl.js"></script> <script src="hjx/homeCtrl.js"></script> <script src="hjx/backgroundCtrl.js"></script> </head> <body ng-controller="MainCtrl"> <div ui-view></div> </body> </html>
用ng-app命令声明app名字为myAPP,然后像其他HTML文件一样,声明引用的演示文件、脚本文件等,最后再声明各模块的控制器文件;这里必须先引入angularjs.min.js文件,再引用angular-ui-router.min.js文件,后者依赖前者;
为这个HTML文件声明控制器,名为MainCtrl;在里层的一个div标签中声明视图的容器,接下来的每个视图都将放在这个div标签中。
然后,配置路由:
1 var myApp = angular.module("myApp", [‘ui.router‘]); 2 myApp.config(function ($stateProvider, $urlRouterProvider) { 3 $urlRouterProvider.otherwise(‘background‘); 4 //$stateProvider.otherwise("home"); 5 $stateProvider 6 .state("home", { 7 url: "/home", 8 templateUrl: "hjx/home.html", 9 controller: ‘homeCtrl‘ 10 }) 11 .state("background", { 12 url: "/background", 13 templateUrl: "hjx/background.html", 14 controller: ‘BackgroundCtrl‘ 15 }) 16 .state("tabs", { 17 url: "/tabs", 18 templateUrl: "module/tabs.html" 19 }) 20 .state("tabs.index", { 21 url:"/index", 22 templateUrl: "module/tab.index/index.html", 23 controller:‘IndexCtrl‘ 24 }) 25 .state("tabs.view", { 26 url:"/view", 27 templateUrl: "module/tab.view/view.html" 28 }) 29 .state("single", { 30 url:"/single", 31 templateUrl: "module/single/single.html" 32 }); 33 //$stateProvider.otherwise("home"); 34 });
使用APP.config()函数为应用配置路由,这里注入$stateProvider和$urlRouterProvider服务,需要说明的是,按照AngularJs的教程只用$stateProvider来配置路由无法成功,报注入错误的错误信息,所以引入$urlRouterProvider服务,当没有选择任何视图时,跳转到$urlRouterProvider.otherwise(‘background‘)所指明的视图中。路由的配置语法,跟switch语句很像,当状态(state)满足任一状态时,显示对应的视图,并调用对应视图的控制器,从而实现页面跳转,实则为状态的跳转。
url:URL中显示的路径
templateUrl:模板(视图)路径
controller:模板(视图)对应的控制器
- 为什么在这里指明了控制器,状态跟换时会自动找到对应的控制器进行调用呢?
因为在index.html文件中,已经引用了此文件,也就是在引用一加载的时候,应用已经知道这个控制器了,在需要的时候,这个控制器就会被调用。
- 路由配置有顺序的概念吗?
没有,只有对应关系,没有先后关系,模板对应控制器,对应显示的路径。就像switch语句中每个case没有先后,但每一个case对应一段需要执行的代码。
- “$urlRouterProvider.otherwise(‘background‘);”语句可以写后面吗?
可以,就好比switch语句的default可以写前面也可以写后面。
最后,写各个视图:
自己写的各个视图可以按照功能模块分成一个个文件夹,每一个写好的控制器,都有唯一的一个名字。并且为了方便,会直接在index.html文件中引用。
值得提一下的是,为了能够方便地跳转到各个状态,可以在index.html中视图容器外添加一个菜单栏,这样菜单栏不会随着状态的跳转而不见,就方便随意跳转了。这种设计和许多官网的设计是一样的,这说明,这种设计很实用。
以上是关于搭建带路由的AngularJs框架的主要内容,如果未能解决你的问题,请参考以下文章
AngularJS 前端(带路由)结合 Laravel API 作为后端