用angularjs ui路由器替换另一部分自我部分

> View Names – Relative vs. Absolute Names

引用：

// absolutely targets the unnamed view in root unnamed state.
// <div ui-view/> within index.html
"@" : { }

因此,根视图名称是空字符串,对于子项,可以表示为“@”

$stateProvider
  .state('customers',{
      url: "/customers",controller: ['$scope',function($scope,$state) {
      }]
  })
  .state('customers.create',{
    url: "/create",views: {
      '@': {
        templateUrl: "../views/customers.create.html"
      }
    }
  })

请参阅本plunker中的更多内容

延伸.任何状态定义都是定义视图名称,其template / templateUrl / templateProvider属于该名称.如果只有一个模板要注入父ui-view =“”(未命名),我们可以使用以下语法：

.state('customers',templateUrl: "tpl.customers.html",controller: ....            
  })

这等于这个语法：

.state('customers',views: {
        // explicit information that we target unnamed view
        '': {
          templateUrl: "tpl.customers.html",controller: ... 
        }
      }
  })

所以,如果我们必须在根级别上查看目标

<h4 data-ui-view="header"></h4>
<div data-ui-view=""></div>

我们可以定义这样的状态：

$stateProvider
  .state('customers',views: {
        'header': {
          template: '<div>customers</div>',// controller...
        },'': {
          templateUrl: "tpl.customers.html",controller: ...
        }
      }
  })
  .state('customers.create',views: {
      'header@': {
        template: "<div>create</div>",},'@': {
        templateUrl: "tpl.customers.create.html",}
    }
  })
  ;

参见扩展示例plunker

EXTEND：给出评论的答案：

… I have no idea why it works now here…did the same as before I just put this in my code: ‘@’: { templateUrl: “tpl.customers.create.html”,}..

如上所述：View Names – Relative vs. Absolute Names：

Behind the scenes,every view gets assigned an absolute name that follows a scheme of viewname@statename,where viewname is the name used in the view directive and state name is the state’s absolute name,e.g. contact.item. You can also choose to write your view names in the absolute syntax.

那会发生什么？

>放在index.html中的ui-view =“”获得绝对名称“@”.它由三部分组成(只有一个字符).分隔符是@,它左边的字符代表viewName,右边的字符代表stateName
>在“客户”状态下,使用ui-view =“header”,其绝对名称为：“header @ customers”.因此,任何子状态都可以使用自己的tamplate / tempalteUrl / templateProvider来定位此视图
>拥有一个未命名模板的州’客户’ui-view =“”它的aboslute名称将是“@customers”(@的左侧是未命名的空字符串).如果像’customers.create’这样的子状态想要定位此视图,

它可以使用以下其中一种：

views : {
  "@customers" : {
      template: ....
   }
}
// or
template: ....

因为第二个只使用隐式表示法,最终会以“”(无名字)“@”(分隔符)“customers”(parent stateName)==“@customers”结尾

4.我们可以使用相同的表示法来定位根(index.html).

根名称是“”,而视图名称是“”,我们最终在“”“@”“”==“@”.这就是为什么这个神奇的环境能够将我们的视图放到root ui-view =“”index.html来自“@”