搭建带路由的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 带参数的路由

如何利用AngularJs快速搭建前端基本框架

AngularJS 前端(带路由)结合 Laravel API 作为后端

初入AngularJS基础门

[angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架

[angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架