首页 > 代码库 > 搭建带路由的AngularJs框架

搭建带路由的AngularJs框架

2024-09-11 10:07:40   217人阅读

一、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框架


联系
我们