heidsoft commented 7 years ago

app/ ----- shared/ // acts as reusable components or partials of our site ---------- sidebar/ --------------- sidebarDirective.js --------------- sidebarView.html ---------- article/ --------------- articleDirective.js --------------- articleView.html ----- components/ // each component is treated as a mini Angular app ---------- home/ --------------- homeController.js --------------- homeService.js --------------- homeView.html ---------- blog/ --------------- blogController.js --------------- blogService.js --------------- blogView.html ----- app.module.js ----- app.routes.js assets/ ----- img/ // Images and icons for your app ----- css/ // All styles and style related files (SCSS or LESS files) ----- js/ // JavaScript files written for your app that are not for angular ----- libs/ // Third-party libraries such as jQuery, Moment, Underscore, etc. index.html

heidsoft commented 7 years ago

http://bubkoo.com/2014/01/01/angular/ui-router/guide/multiple-named-views/

heidsoft commented 7 years ago

当您需要使用多视图时，需要用到状态的views属性，views属性值是一个对象。
设置views属性将覆盖覆盖的template属性
如果在状态中定义了views属性，那么状态中的templateUrl、template 和 templateProvider属性将被忽略。
示例 - 名称匹配
views的属性key应该对应的ui-view的名称、像下面这样：

<!-- index.html -->
<body>
  <div ui-view="filters"></div>
  <div ui-view="tabledata"></div>
  <div ui-view="graph"></div>
</body>

$stateProvider
  .state('report', {
    views: {
      'filters': { ... templates and/or controllers ... },
      'tabledata': {},
      'graph': {},
    }
  })
然后views中的每一个 view 都可以设置自身的模板属性（template，templateUrl，templateProvider） 和控制器属性（controller，controllerProvider）。

$stateProvider
  .state('report',{
    views: {
      'filters': {
        templateUrl: 'report-filters.html',
        controller: function($scope){ ... controller stuff just for filters view ... }
      },
      'tabledata': {
        templateUrl: 'report-table.html',
        controller: function($scope){ ... controller stuff just for tabledata view ... }
      },
      'graph': {
        templateUrl: 'report-graph.html',
        controller: function($scope){ ... controller stuff just for graph view ... }
      },
    }
  })
视图名称 - 相对命名与绝对命名
在定义views属性时，如果视图名称中包含@，那么视图名称就是绝对命名的方式，否则就是相对命名的方式。相对命名的意思是相对于父模板中的ui-view，而绝对命名则指定了相对于哪个状态的模板。
在 ui-router 内部，views属性中的每个视图都被按照viewname@statename的方式分配为绝对名称，viewname是目标模板中的ui-view对应的名称，statename是状态的名称，状态名称对应于一个目标模板。@前面部分为空表示未命名的ui-view，@后面为空则表示相对于根模板，通常是 index.html。
例如，上面的例子可以写成如下方式：

.state('report',{
  views: {
    'filters@': { },
    'tabledata@': { },
    'graph@': { }
  }
})
注意，这样的写法，视图的名称指定为绝对的名字，而不是相对的名字。这样 ‘filters’，’tabledata’和’graph’三个视图将加载到根视图的模板中(由于没有父状态，则根模板就是index.html)。
绝对命名的方式可以让我们完成一些强大的功能，让我们假设我们有几个模板设置（这里仅仅作为实例演示，有些不现实的地方），像下面这样：

<!-- index.html (root unnamed template) -->
<body ng-app>
<div ui-view></div> <!-- contacts.html plugs in here -->
<div ui-view="status"></div>
</body>

<!-- contacts.html -->
<h1>My Contacts</h1>
<div ui-view></div>
<div ui-view="detail"></div>

<!-- contacts.detail.html -->
<h1>Contacts Details</h1>
<div ui-view="info"></div>
让我们来看看在contacts.detail状态中，相对命名和绝对命名的各种使用方式，请注意，一旦使用了@则表示绝对命名的方式。

$stateProvider
  .state('contacts', {
    // 根状态，对应的父模板则是index.html
    // 所以 contacts.html 将被加载到 index.html 中未命名的 ui-view 中
    templateUrl: 'contacts.html'   
  })
  .state('contacts.detail', {
    views: {
        // 嵌套状态，对应的父模板是 contacts.html
        // 相对命名
        // contacts.html 中 <div ui-view='detail'/> 将对应下面
        "detail" : { },   

        // 相对命名
        // 对应 contacts.html 中的未命名 ui-view <div ui-view/>
        "" : { }, 
        // 绝对命名
        // 对应 contacts.detail.html 中 <div ui-view='info'/>
        "info@contacts.detail" : { }
        // 绝对命名
        // 对应 contacts.html 中 <div ui-view='detail'/>
        "detail@contacts" : { }
        // 绝对命名
        // 对应 contacts.html 中的未命名 ui-view <div ui-view/>
        "@contacts" : { }
        // 绝对命名
        // 对应 index.html 中 <div ui-view='status'/> 
        "status@" : { }
        // 绝对命名
        // 对应 index.html 中 <div ui-view/>
        "@" : { } 
  });
你将发现，不仅仅可以在同一状态设置多个视图，而且祖先状态可以由开发者自由控制:)。

heidsoft commented 7 years ago

编译三阶段：

1. 标准浏览器API转化

将html转化成dom，所以自定义的html标签必须符合html的格式

2. Angular compile

搜索匹配directive，按照priority排序，并执行directive上的compile方法

3. Angular link

执行directive上的link方法，进行scope绑定及事件绑定

为什么编译的过程要分成compile和link?

简单的说就是为了解决性能问题，特别是那种model变化会影响dom结构变化的，而变化的结构还会有新的scope绑定及事件绑定，比如ng-repeat

compile和link的形式

compile

function compile(element, attrs, transclude) { ... }
在compile阶段要执行的函数，返回的function就是link时要执行的function
常用参数为element和attrs，分别是dom元素和元素上的属性们，其它的以后细说
较少使用，因为大部分directive是处理dom元素的行为绑定，而不是改变它们
link

function link(scope, element, attrs, controller) { ... }
在link阶段要执行的函数，这个属性只有当compile属性没有设置时才生效
常用参数为scope，element和attrs，分别是当前元素所在的scope，dom元素和元素上的属性们，其它的以后细说
directive基本上都会有此函数，可以注册事件，并与scope相绑
compile和link的使用时机

compile

想在dom渲染前对它进行变形，并且不需要scope参数
想在所有相同directive里共享某些方法，这时应该定义在compile里，性能会比较好
返回值就是link的function，这时就是共同使用的时候
link

对特定的元素注册事件
需要用到scope参数来实现dom元素的一些行为

heidsoft commented 7 years ago

https://www.gitbook.com/book/checkcheckzz/angularjs-learning-notes/details

heidsoft commented 7 years ago