【angular】angular-ui-router学习

Angular-ui-router是建立SPA的route框架,学好ui-router框架,我们能更好的优化我们的web前端。

下面先呈上我们的index.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>learn-ui-router</title>
    <style> .active { color : red; font-weight : 600; } </style>
</head>
<body ng-app="app"> <!-- 申明这是一个angular模块 -->
    <!-- ui-sref 是一个指令,当点击的时候,会激活一个状态,它的功能类似于href,它代表的是一个state,有了这个指令后,dom会自动在这个a上面生成一个href属性属性值就是state的url值-->
    <!-- ui-sref-active 代表当状态被激活的时候,呈现的class,可以自定义样式,然后值写成你定义的即可 -->
    <a ui-sref="main" ui-sref-active="active">main</a>
    <a ui-sref="about" ui-sref-active="active">about</a>
    <a ui-sref="help" ui-sref-active="active">help</a>
    <!-- 上面状态激活后,模板加载的地方 -->
    <ui-view></ui-view>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-ui-router.js"></script>
    <script> angular.module("app",['ui.router'],function($stateProvider){ $stateProvider.state({ name : "main",url : "/main",template : "<span> i have a dream ! </span>" }).state({ name : "about",url : "/about",template : "<span> This is a about page ! </span>" }).state({ name : "help",url : "/help",template : "<span> please call the 110 for help ! </span>" }) }) </script>
</body>
</html>

1,首先你需要先下载好angular.js或者 angular.min.js 还有 angular-ui-router.js ,
2,创建一个module,angular.module(),该方法在参数个数不同的时候,功能也不尽相同,当一个参数的时候,如 : var getModule = angular.module("app")方法代表获取一个建立好的module,那么如何创建一个module呢? angular.module("app",[依赖项],configFunction) 依赖项可以为空数组,configFunction也可不写,或者angular.module(“app”,[依赖项]).config(function(){}),效果是一样的 3,$stateProvider提供三个state,供上面的ui-sref使用。

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...