Angularjs 는 json 파일 의 동적 생 성 루트 상태 에 따라 실현 하 는 방법

4228 단어 angularjson
프로젝트 에 새로운 수요 가 있 습 니 다.제 이 슨 파일 의 동적 생 성 경로 상태 에 따라 자 료 를 찾 아 보고 지금 정리 해서 보 내 는 것 입 니 다.
우선 프로젝트 는 angular 의 UI-루트 를 사용 하기 때문에 angular.js 와 angular-ui-router.js 두 개의 js 파일 을 도입 해 야 합 니 다.다음 과 같은 예 입 니 다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="js/routing.js"></script>
  <script src="js/app.js"></script>
</head>
<body ng-app="App" ng-controller="MainController">
<a ng-click="reload()">reload</a>
<a ui-sref="xxx">xxx</a>
<a ui-sref="yyy">yyy</a>
<div ui-view></div>
</body>
</html>
그리고 제 이 슨 파일 의 데이터 입 니 다.다음 과 같 습 니 다.

{  "xxx": {
    "url": "/xxx",
    "templateUrl": "templates/xxx.html"
  },
  "yyy": {
    "url": "/yyy",
    "templateUrl": "templates/yyy.html"
  },
  "ccc": {
    "url": "/ccc",
    "templateUrl": "templates/yyy.html"
  },
  "zzz": {
    "url": "/zzz",
    "templateUrl": "templates/zzz.html"
  }
}
그 다음 에 서 비 스 를 정의 합 니 다.json 파일 을 가 져 오 는 ajax 가 요청 한 주 소 를 설정 하 는 방법 을 정의 합 니 다.주 방법 은 ajax 를 보 내 고 결 과 를 순환 적 으로 기록 하 는 것 입 니 다.

'use strict'
angular.module('Routing', ['ui.router'])
  .provider('router', function ($stateProvider) {
    var urlCollection;
    this.$get = function ($http, $state) {
      return {
        setUpRoutes: function () {
          $http.get(urlCollection).success(function (collection) {
            for (var routeName in collection) {
              if (!$state.get(routeName)) {
                $stateProvider.state(routeName, collection[routeName]);
              }
            }
          });
        }
      }
    };
    this.setCollectionUrl = function (url) {
      urlCollection = url;
    }
  })
마지막 으로 가장 관건 적 인 angular 설정 단계 와 실행 단계 의 코드 입 니 다.설정 단 계 는 최소한 하나의 상 태 를 요구 합 니 다.예 를 들 어$stateProvider.state('home', {url: '/home',templateUrl: 'templates/home.html'});또한 기본 상 태 를 설정$urlRouterProvider.otherwise('/home');한 다음 에 위의 서비스의 setCollectionUrl 방법 으로 url 주 소 를 설정 하여 ajax 요청 을 보 낼 수 있 습 니 다.마지막 으로 angular 의 실행 단계 의 run 방법 에서 setUpRoutes 방법 으로 json 파일 의 데 이 터 를 일정한 형식 에 따라 동적 으로 기록 합 니 다.코드 는 다음 과 같 습 니 다.

angular.module('App', ['ui.router', 'Routing'])
  .config(function ($stateProvider, $urlRouterProvider, routerProvider) {
    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'templates/home.html'
      });
    $urlRouterProvider.otherwise('/home');
    routerProvider.setCollectionUrl('js/routeCollection.json');
  })
  .run(function (router) {
    router.setUpRoutes();
  })
;
이 는 angular 경로 상 태 를 동적 으로 가 져 오 는 예 를 소개 합 니 다.관심 이 있 는 사람 은 원문 주소 와 원문 코드 의 github 를 볼 수 있 습 니 다.각각 다음 과 같 습 니 다.
github 주소
 github 에서 git clone 으로 내 려 오 면 프로젝트 에 bower.json 파일 이 있 고 상기 두 개의 js 파일 이 없습니다.우 리 는 프로젝트 에서 node 의 패키지 관리자 npm 를 사용 하여 bower 를 다운로드 한 다음 이 프로젝트 의 명령 행 에 bower install 을 입력 하면 프로젝트 에 사용 할 js 파일 을 다운로드 할 수 있 습 니 다.
위 에서 말 한 것 은 편집장 이 소개 한 Angularjs 가 json 파일 의 동태 적 인 생 성 경로 상태 에 따라 여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
jacascript DOM 노드―요소 노드,속성 노드,텍스트 노드
MYSQL 빅 데이터 가 져 오기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage