Angular 사용을 배우면 UI-Route가 어려움 중 하나입니다. 간단한 사용에는 문제가 없지만 다단계 중첩과 관련하여 혼란스러워합니다. 나는 많은 정보를 찾고 많은 함정을 밟았습니다. 지금까지, 나는 UI-route에 대한 포괄적 인 이해가 있다고 말할 수 없습니다. 여기 나는 단지 내가 채운 몇 개의 구덩이를 녹음합니다.
1. 요약중인 :
$ StateProvider .state ( 'shop', {resolve : { "shoplist": function ($ http) {return $ http ({url : "/bookapp/data/shoplist.php", 메소드 : "get"})}, 초록 : true, url : "/shop", templateurl : "templates/shop/list.html", 컨트롤러 : "ShoplistController"})추상 속성을 사용하는 것은 무엇입니까? 공식 설명 : 요약 : True는이 상태를 명시 적으로 활성화 할 수 없으며 하위 상태에서만 암시 적으로 만 활성화 될 수 있음을 나타냅니다. 명시 적으로 활성화 할 수없는 경우 "/shop"을 통해 직접이 상태 경로에 액세스 할 수 없습니다. 막 다른 골목이 아닌가요? 그렇게하는 요점은 무엇입니까? 잠깐, 다음 문장을 살펴 보겠습니다. 퀼트 상태에서 숨겨져 활성화 될 수 있으며 여전히 살아있는 것 같습니다. 어떻게 생생하게 만들 수 있습니까? 다음 코드를 살펴 보겠습니다.
.STATE ( 'shop.main', {url : "/: id", Abstract : True, TemplateUrl : "templates/shop/main2.html", 컨트롤러 : "ShopMainController"})주 : "Shop.Main"은 상점의 변전소입니다. 이론에 따르면 Shop.Main은 상점을 활성화 할 수 있습니다. 상점 및 "Shop.Main"을 활성화 할 수 있도록 Access : /Shop /1 만 액세스하면됩니다.
서두르지 말자. 나는 흥미로운 것들을 가지고 놀기 위해 추상 속성을 추가 할 것입니다. 다음 단계에서 다음 코드를 살펴 보겠습니다.
.state ( 'shop.main.info', {url : "", templateUrl : "templates/shop/info.html", cache : 'false', 컨트롤러 : "infocontroller"}) .state ( 'shop.main.author', {url : "/authuthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthorauthor <. .state ( 'shop.main.samebook', {url : "samebook", 템플릿 : "<div> samebooksamebooksamebooksamebook </div>"})나는 "shop.main.info"주가 주의 URL을 가지고 있음을 알 수 있습니다.
현재 모듈의 중첩 관계는 List.html 중첩 main.html, main.html 중첩 된 info.html입니다. "shop/: id"의 URL을 통해이 3 계층 둥지를 활성화 할 수 있습니다.
2. 컨트롤러에서 매개 변수 사용 :
이것에 어려움이 없습니다. "$ StateParams"URL 매개 변수를 컨트롤러에 주입하면이 개체에서 얻을 수 있습니다.
shop.controller ( "ShopMainController", [ '$ scope', '$ stateparams', '$ rootscope', 함수 ($ scope, $ stateParams, $ rootscope) {$ scope.persons = [1,2,3,4,5,6]; $ scope.good = {id : $ StateParams.id} cfploadingbar.start ();}]);3. 템플릿 캐시를 방지하는 방법
개발 과정에서 템플릿 캐시는 디버깅에 심각한 영향을 미칩니다. 때로는 코드가 수정되지만 템플릿은 전혀 변경되지 않습니다. 매우 고통 스럽습니다. StateChangesuccess를 듣고 $ templatecache를 청소하면됩니다. 여기서 우리는 실행 방법을 사용하여 리스너를 추가합니다.
BookApp.run ([ '$ rootscope', '$ templatecache', function ($ rootscope, $ templatecache) {var statechangesuccess = $ rootscope. $ on ( '$ statechangesuccess', statechangesuccess ($ statechangesuccess); {$ rootscope) {retecache.);위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.