如何在其他文件js中使用带有route-ui的控制器

Question

I got an example from here : http://scotch.io/tutorials/javascript/angular-routing-using-ui-router and I see an example about using route-ui as below: 我从这里获得了一个示例： http : //scotch.io/tutorials/javascript/angular-routing-using-ui-router ，我看到了一个有关使用route-ui的示例，如下所示：

$stateProvider

    // HOME STATES AND NESTED VIEWS ========================================
    .state('home', {
        url: '/home',
        templateUrl: 'partial-home.html'
    })

    // nested list with custom controller
    .state('home.list', {
        url: '/list',
        templateUrl: 'partial-home-list.html',
        controller: function($scope) {
            $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
        }
    })

    // nested list with just some random string data
    .state('home.paragraph', {
        url: '/paragraph',
        template: 'I could sure use a drink right now.'
    })

my question is : how can I use controller in other file and then call the name of that controller into .state's option ? 我的问题是：如何在其他文件中使用控制器，然后将该控制器的名称调用到.state选项中？

Here is my controller that I want to use in other file : 这是我要在其他文件中使用的控制器：

(function () {
    'use strict';
    angular.module("myCtrl", [])
    .controller('myCtrl', function ($scope) {
        $scope.dogs = ['name 1', 'name 2', 'name 3', 'name 4']; 
    })
})();

and here is my rout-ui : 这是我的rout-ui：

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

        .state('home', {
            url: '/home',
            templateUrl: 'home/partial-home.html',
            controller: 'myCtrl'
        })

        .state('about', {
            url: '/about',
            templateUrl: 'about/partial-about.html'
        });

});

and below is my html page : 下面是我的html页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>testRoute</title>

    <!-- testRoute references -->
    <link href="css/index.css" rel="stylesheet" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body ng-app="routerApp">
    <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
    </ul>
    <div ui-view></div>
    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>

    <script src="scripts/index.js"></script>
    <script src="scripts/app.js"></script>
    <!--<script src="scripts/myController.js"></script>-->
</body>
</html>

Answer 1

您是否尝试过仅做控制器：“ Name_of_your_Controller”？

如何在其他文件js中使用带有route-ui的控制器

问题描述

1 个解决方案

解决方案1
0 2014-10-20 10:08:05

如何在其他文件js中使用带有route-ui的控制器

问题描述

1 个解决方案

解决方案1 0 2014-10-20 10:08:05

解决方案1
0 2014-10-20 10:08:05