Ng-Route,Gulp和Json的Angular JS问题

时间:2016-02-27 04:32:43

标签: angularjs json

我对前端开发的世界很陌生,我正在使用AngularJS完成我的第一个项目。我也在使用Yeoman,Gulp,Bower来设置我的项目,这对我来说也很新鲜......我有点用yo生成器Gulp Angular制作了一个版本,然后对它进行了个人接触。我确信我弊大于利:但我正在学习。

无论如何我整天都在编码,而且在使用ng-route时我的项目遇到麻烦的原因真的很难过。主屏幕显示正常,但当我尝试点击更深层页面的链接时,它只会刷新回家。我正在使用Json文件而不是服务器,并且Gulp Angular设置在启动服务器时将我的所有文件编译到另一个文件夹。这个问题是否有可能存在于编译器中?

我开始变得疯狂所以我想我会叫它退出当晚但是如果有人有时间和慷慨地看着我的github回购我会很高兴:)

由于

https://github.com/jleibham/BhamDesigns.git

应用模块

<div id="welcome_text_div">
  <p id="welcome_text"> Welcome </p>
</div>


#welcome_text_div {
position: absolute;
background-color:red;
width:800px;
height:300px;
top: 50%;
margin-top: -150%;
left: 50%;
margin-left: -400px;

}

#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
text-align: center;

}

App Controller

(function() {
  'use strict';

      var bhamDesignsApp = angular.module('bhamDesignsApp', ['ngAnimate', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ngRoute', 'mm.foundation', 'appControllers']);

        bhamDesignsApp.config(['$routeProvider',
          function($routeProvider) {
            $routeProvider.
              when('/projects', {
                templateUrl: 'partials/projects.html',
                controller: 'ProjectsController'
              }).
              when('/projects/:projectId', {
                templateUrl: 'partials/gallery.html',
                controller: 'GalleryController'
              }).
              otherwise({
                redirectTo: '/projects'
              });
          }]);

    })();

1 个答案:

答案 0 :(得分:1)

您正在调用错误的网址,而您的路由无法识别您使用href调用的网址,因此会重定向您。在你打电话给你:

href="#/json/galleries/(what ever the project.id is)

然后您的路由应该与此类似:

when('/json/galleries/:projectId', { /// the rest of your code

您将要使用$routeParameters和ngRoute。 here is a great example