w3schools - install ngroute angularjs




angularJS에서 routeProvider 및 locationProvider를 설정하는 방법은 무엇입니까? (4)

angularJS에서 활성화 된 html5Mode를 원하지만 왜 작동하지 않는지 모르겠습니다. 내 코드에 문제가 있습니까?

angular
    .module('myApp',[])
    .config(function($locationProvider, $routeProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider.when('/', {
           templateUrl: 'partials/home.html', 
           controller: HomeCtrl
        });

        $routeProvider.when('/tags/:tagId', {
            templateUrl: 'partials/result.html', 
            controller: TagResultCtrl
        });
        //$routeProvider.otherwise({redirectTo: '/home', controller: HomeCtrl});
     });

html로

  <a href="tags/{{tag.id}}"><img data-ng-src="{{tag.imageUrl}}"></a>

@ 단순 솔루션

나는 간단한 파이썬 HTTP 서버를 사용한다. 문제의 Angular app 디렉토리 (Mavericks 10.9 및 Python 2.x가있는 MBP 사용)에서 간단히 실행합니다.

python -m SimpleHTTPServer 8080

그리고 포트 8080에 간단한 서버를 설치하면 브라우저에서 localhost:8080 을 방문하여 개발중인 응용 프로그램을 볼 수 있습니다.

희망이 도움이!


AngularJS는 $routeProvider 객체를 사용하여 경로를 컨트롤러 및 템플릿과 연관시키는 간단하고 간결한 방법을 제공합니다. 최근에 응용 프로그램을 최신 릴리스 (현재 시간에 1.2 RC1)로 업데이트하는 동안 나는 $routeProvider 표준 angular.js 스크립트에서 더 이상 사용할 수 없다는 것을 깨달았습니다.

변경 로그를 읽은 후 라우팅은 이제 애니메이션과 다른 몇 가지 모듈뿐만 아니라 별도의 모듈 (내가 생각하는 위대한 움직임)이라는 것을 깨달았습니다. 결과적으로 1.2 (또는 향후) 릴리스로 이동하는 경우 다음과 같은 표준 모듈 정의 및 구성 코드가 더 이상 작동하지 않습니다.

var app = angular.module('customersApp', []);

app.config(function ($routeProvider) {

    $routeProvider.when('/', {
        controller: 'customersController',
        templateUrl: '/app/views/customers.html'
    });

});

어떻게 고쳐 주나요?

angle.js와 함께 angle-route.js를 페이지에 추가하기 만하면됩니다. (여기에 angle-route.js 버전을 가져 와서 - 현재 업데이트 후보 버전임을 염두에 두십시오) 모듈 정의를 다음과 같이 변경하십시오 다음과 같은:

var app = angular.module('customersApp', ['ngRoute']);

애니메이션을 사용하는 경우 angular-animation.js가 필요하며 해당 모듈을 참조해야합니다.

 var app = angular.module('customersApp', ['ngRoute', 'ngAnimate']);

귀하의 코드는 다음과 같습니다 :

    var app = angular.module('app', ['ngRoute']);   

    app.config(function($routeProvider) {

    $routeProvider
        .when('/controllerone', {
                controller: 'friendDetails',
                templateUrl: 'controller3.html'

            }, {
                controller: 'friendsName',
                templateUrl: 'controller3.html'

            }

    )
        .when('/controllerTwo', {
            controller: 'simpleControoller',
            templateUrl: 'views.html'
        })
        .when('/controllerThree', {
            controller: 'simpleControoller',
            templateUrl: 'view2.html'
        })
        .otherwise({
            redirectTo: '/'
        });

});

너는 시도 할 수 있었다 :

<a href="#/controllerone">Controller One</a>||
<a href="#/controllerTwo">Controller Two</a>||
<a href="#/controllerThree">Controller Three</a>

<div>
    <div ng-view=""></div>
</div>

다음은 기본 href <head><base href="/"></head> 설정을 피하기 위해 requireBase=false 플래그를 사용하여 $ locationProvider를 구성하는 방법입니다.

var app = angular.module("hwapp", ['ngRoute']);

app.config(function($locationProvider){
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    }) 
});




angularjs