Question

我正在使用$stateProvider进行路由。这是我的文件夹结构

app
  -css
    -style.css
  -js
    -app.js
views
  -home.html
  -list.html
index.html

这是我的州代码

app.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/home');

$stateProvider.state('home',{
    url:'/home',
    templateUrl:'home.html',
    controller:'home'
})
});

但是加载应用程序时看不到主页。如果我使用内联模板并在index.html中添加home.html的HTML代码，那就像

一样

<script type="text/ng-template" id="home.html">
 // home.html code here--
</script>

我应该如何为此文件夹结构创建状态？提前谢谢。

Answer 1

我认为你犯了一个小错误。 $ stateProvider中的templateUrl应该包含从根目录的完整视图路径。它应该是

templateUrl: 'views/home.html'

请检查一下。

Answer 2

its best advised to follow a folder structure by feature as below.

    app
     -module1
        -module1.home.html
        -module1.home.controller.js
        -feature1
           -module1.feature1.html
           -module1.feature1.controller.js
    -module2
        -module2.home.html
        -module2.home.controller.js
        -feature1
           -module2.feature1.html
           -module2.feature1.controller.js
    index.html  
sample stateprovider configuration as below.
here home is an abstract state which can be only invoked via its sub states.
  $stateProvider.state('home', {
            url: "/home",
            abstract: true,
            templateUrl: "<div ui-view></div>"
           })
        .state('home.module1', {
                 url: "/module1home",
                 templateUrl: "app/module1/module1.home.html",
                 controller: 'Module1HomeController'

             })

             .state('home.module2', {
                 url: "/module2home",
                 templateUrl: "app/module2/module2.home.html",
                 controller: 'Module2HomeController'

             });

我应该如何根据Angular JS中的文件夹结构使用$ stateProvider创建状态

2 个答案: