发表于: 2017-07-03 23:59:57

1 788


今天完成的事情:

再捋一捋ui-route的使用方法,老是忘记。跟angular比较起来,angularJS的路由配置略为繁琐。


Angularjs ui-router组件:


$state / $stateProvider:

管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数,异步解决目标状态的任何依赖项,更新$location到当前状态。由于状态包含关联的 url,通过$urlRouterProvider生成一个路由规则来执行转换的状态。


ui-view指示器:

渲染状态中定义的视图,是状态中定义的视图的一个占位符。


$urlRouter / $urlRouterProvider:

管理了一套路由规则列表来处理当$location发生变化时如何跳转。最低级的方式是,规则可以是任意函数,来检查$location,并在处理完成时候返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的 url 占位符规则。


$urlMatcherFactory:

将 url和占位符编译为UrlMatcher对象。除了$routeProvider支持的占位符语法之外,它还支持扩展语法,允许一个正则表达式指定占位符,并且能够提取命名参数和查询url的一部分。


$templateFactory - 通过$http / $templateCache来加载模板,供状态配置中使用。


将UI-Router作为web应用的依赖,注入到主程序:

angular.module('myApp', ['ui.router']);


<div ng-controller="DemoController">

      <div ui-view></div>

</div>

为特定状态指定的模板将会放在<div ui-view></div>元素中。在这些模板中也可以包含自己的ui-view,这就是在同一个路由下实现嵌套视图的方法。要定义一个路由,与传统的方法相同:使用.config方式,但使用的不是$routeProvider而是$stateProvider。


.config(function($stateProvider, $urlRouterProvider) {

      $stateProvider

        .state('start', {

          url: '/start',

          templateUrl: 'xxx/start.html'

       })

  });

在设置对象上定义了一个叫start的状态。


模板,模板路径,模板Provider:

在每个视图下使用如下方式来设置模板 - template - HTML字符串,或者是返回HTML字符串的函数 - templateUrl - HTML模板的路径,或者是返回HTML模板路径的函数 - templateProvider - 返回HTML字符串的函数 例如:

$stateProvider.state('home', {

      template: '<h1>Fuck {{ name }}</h1>'

   });


URL:
url选项将会为该应用的状态指定一个URL基于用户浏览该应用所在的状态。这样当在浏览该应用的时候便能实现深度链接的效果。 

  $stateProvider

      .state('inbox', {

        url: '/inbox',

        template: '<h1>motherfucker</h1>'

     });

当用户浏览到/inbox时,该应用将状态改为inbox同时向主ui-view元素中插入模板中的内容h1。


明天计划的事情:

继续完成任务


问题:

没消化完。requirejs怎么搞?


收获:

如上



返回列表 返回列表
评论

    分享到