나는 집에 지루했고 Angular Online에 대한 튜토리얼을 찾았습니다. 나는 각도, UI- 로터와 NG- 그리드의 두 모듈을 배웠고 그것을 모방하여 작은 것을 만들었습니다.
코드는 GitHub에 업로드되었으며 주소는 https://github.com/wwervin72/angular입니다.
관심있는 친구들을 볼 수 있습니다. 그런 다음 먼저이 두 모듈의 사용법을 이해합니다.
먼저 딥 레벨 라우팅을 구현하는 데 주로 사용되는 UI-Router 모듈에 대해 먼저 이야기 해 봅시다. 실제로 Angular에는 내장 지침 NG-Route가 있습니다. 프로젝트에 중첩 문제가 없다면이 명령어를 사용하여 페이지 간 점프를 달성하는 것이 매우 편리하지만, 그 단점은 깊은 중첩 경로를 사용할 수있는 방법이 없다는 것입니다. 먼저이 모듈을 사용하려면 다운로드해야합니다.
다운로드 주소는 http://www.bootcdn.cn/angular-ui-router/입니다.
다운로드 후 프로젝트로 가져올 수 있습니다. 이 모듈은 Angular를 기반으로하기 때문에이 전에 Angular JS 파일을 가져와야합니다. 이것은 Angular의 공식 웹 사이트에서 다운로드 할 수 있습니다.
그런 다음 위의 모든 준비가 완료된 후에는 코드를 직접 작성할 수 있습니다.
HTML 부분
<div> <div ui-view> </div> </div>
DIV에 추가 된 속성은 더 이상 ng-view가 아니라 UI-View라는 점에 주목해야 할 사항이 있습니다.
JS 부분
var app = angular.module ( 'app', [ 'ui.router', 'loginModel', 'listModel']); app.config (function ($ stateProvider, $ urlRouterProvider) {$ urlRouterProvider.otherwise ( '/index'); $ StateUrwider ( 'index', urll ://in Index ' 'tpls/start.html'}) .state ( 'register', {url : '/register', templateUrl : 'tpls/register.html'}) .state ( 'main', {url : '/main {positiontype : [0,9] {1,5}}',보기 : {template url : 'tpls/main.html'}, 'typelist@main': {templateUrl : 'tpls/typleist.html'}, 'tbhero@main': {templateUrl : 'tpls/tbhero.html'}}) .state ( 'addHero', {herl : 'tpls/addhero.html'}) .state ( 'find', {url : '/findpwd', templateurl : 'tpls/findpwd.html'}) .state ( '세부 사항', {url : '/detail/: id', templateurl : 'tpls/detail.html'}))).주의를 기울여야 할 세 곳이 있습니다.
1. 둥지를 틀면 내 가장 바깥 쪽 층이 주요 부분이며 타이프리스트 및 Tbhero 부품이 안에 둥지를 틀고 있습니다. 우리는 여기에서 작문 방법에주의를 기울여야합니다.
2. 선택에 따라 다른 내용을 열어야 할 때는 매개 변수를 다음 페이지로 전달해야합니다. 세부 사항 부분은 다음과 같습니다. 여기에서는 작문 방법에 더 많은주의를 기울여야합니다.
3. Angular.Module을 사용하여 앱 응용 프로그램을 생성 할 때 UI.Router 모듈을 가져와야하며 일부 모듈도 여기에서 가져와야합니다.
4. 우리는 $ stateprovider를 사용하여 $ loureprovider가 아닌 경로를 구성하고 언제 대신 여기에 사용 된 상태.
라우팅이 구성된 후 나머지는 TPL의 각 부분에 대한 코드를 작성하는 것입니다. 여기에 너무 많이 소개하지 않을 것입니다. 여기서 가장 중요한 것은 라우팅 구성입니다.
자, NG-Grid의 사용법을 살펴 보겠습니다. 다음은 다운로드 주소 http://www.bootcdn.cn/ng-grid/입니다.
HTML 부분
주요 부분
<div> <div ui-view = "typleist"> </div> <div ui-view = "tbhero"> </div> </div>
타이피리스트 부분
<div> <div> <div> <a href = "javaScript : void (0);"> 영웅 포지셔닝 유형 </a> <a ui-sref = "main ({positionType : 0})"> 모든 위치 </a> <a ui-sref = "main ({positionType : 1})"> 씨 </a> ui-sref = "main ({positionType : 2})"> 미들 레인 </a> <a ui-sref = "main ({positionType : 3})"> 상단 레인 </a> <a ui-sref = "main ({positionType : 4})"> jungler </a> <a ui-sref = "main ({positiontype : 5})"> Assist </a> </div> </div> </div>tbhero 부분
<div ng-controller = "listctrl"> <div> <div> <button ui-sref = "addhero ()"> 추가 영웅 </button </button> <button ui-sref = "index ()"> eleit </div> <div> <form> <입력 유형 = "text"ng-model = "filteroptions.filterte text"PlaceHollerte " </form> </div> </div> <div> <div> <div ng-grid = "gridoptions"> </div> </div> </div> </div> </div> </div>
JS 부분
var listmodel = angular.module ( 'listModel', [ 'nggrid']); listModel.controller ( 'listCtrl', [ '$ scope', '$ http', '$ state', '$ stateparams', function ($ spope, $ http, $ state, $ stateparams) {$ pageize. [5,15,20], Pagesize : 5, CurrentPage : 1}; FilterText : '', $ scope.totalServeritems = 0; SearchText.tolowerCase (); $ http.get ( 'data/here.php? param ='+$ stateparams.posityType) .success (data) {var data = data.filter (item) {return Json.stringify (item) .indexof (searchText);+1). }); $ scope.datas = data.slice = page*pageize) (data.foreach (item.) $ scope.getDates ($ scope.pageOptions.pagesize, $ scope.pagingOptions.currentPage) $ scope ( 'pagingOptions', function ($ scope.getDates.pagingOptions.pagesize, $ scope.pagingOptions.currentPage); $ scope.getDates ($ scope.pageOptions.pagesize, $ scope.pagingOptions.currentPage, $ scope.filteroptions.filtertext); 행 EnabledCellSelection : true, // 셀을 선택할 수 있습니까? enabledCellEdit : false, // 컨텐츠 enabledefs : [{field : 'index', // 여기에 데이터 너비의 속성 이름이 있습니다. Sort}, {field : 'name', displayName : 'name', width : 120, sortable : true, pinnable}, {field : 'alias', displayName : 'alias', 'alias', 'alias', displayName : 'Alias', 'alias', width : 60, true : true}, field : '', pinnable. 너비 : 70, 정렬 가능 : true, pinnable : true}, {필드 : '장비', 디스플레이 이름 : '장비', 너비 : 500, 정렬 가능 : true, pinnable : {field : 'id', 디스플레이 이름 : '세부 전략', false, pinnable : true, celltemplate : '<a div> <a ui-sref = "ui-sref ="세부 사항 ({id : row.getProperty (col.field)}) "id ="{{row.getProperty (col.field)}} "> 세부 사항 </a> </div> '}, enablepaging : true, // true, true, // totalseritems :'talleseritems : 'walleseritems : // 데이터 pagingOptions : $ scope.pagingOptions, // page part filteroptions : $ scope.filteroptions // data filter part}}]))).여기서 가장 중요한 것은 $ scope.gridoptions입니다. 동시에, 우리는 마지막 세부 가이드에서 매개 변수의 작문 방법에 더 많은주의를 기울여야합니다.
다음은 몇 가지 렌더링입니다.
다음은 몇 가지 렌더링입니다.
또한 각도 형식의 검증, 서비스, 마법사, PHP 등의 내용을 소개하지 않을 것입니다. 글쓰기에 문제가 있다면, 나는 당신에게 알려주는 메시지를 남겨 드리겠습니다. 감사합니다 ^_ ^.
AngularJS에서 UI- 로터 및 NG- 그리드 모듈에 대한 위의 간단한 분석은 내가 공유 한 모든 콘텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.