2016-06-05 7 views
0

Это дублированный вопрос, но я не могу понять, что именно я делаю неправильно в своем коде. Это очень простое угловое приложение, но маршрутизация не работает, а также не вызывает контроллер. Я не нахожу ничего неправильного в коде.Угловая/угловая маршрутизация не работает

РЕДАКТИРОВАТЬ: Вот это Plunker

app.js:

var appRoot = angular.module('smapp', ['ngRoute']); 
appRoot.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
     .when('/Home', { templateUrl: '/views/home.html', controller: 'OmdbCtrl' }) 
     .when('/', { templateUrl: '/views/home.html', controller: 'OmdbCtrl' }) 
     .otherwise({ redirectTo: '/' }); 
} 
]); 

Контроллер:

appRoot.controller('OmdbCtrl', ['$scope', 'OmdbFactory', function ($scope, OmdbFactory) { 
    $scope.test = 'working'; 
}]); 

Index.h TML:

<!doctype html> 
<html ng-app> 
<head> 
    <title>My Angular App</title> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
</head> 
<body> 
    <div class="container-fluid">hi 
     <ng-view class="view-slide-in" ng-cloak=""></ng-view> 
    </div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.11/angular.min.js"></script> 
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.11/angular-route.min.js"></script> 
    <script src="./js/app.js"></script> 
    <script src="./js/factory.js"></script> 
    <script src="./js/OmdbCtrl.js"></script> 
</body> 
</html> 

home.html

<div class="row"> 
    <div class="col-lg-12"><h4>{{test}}</h4></div> 
</div> 
+2

Любые ошибки в консоли браузера? Задайте значение ng-app для имени основного модуля ... 'ng-app =" smapp "'. Просто чтобы быть ясным ... вы загружаете эту страницу с сервера ... localhost или web? – charlietfl

+0

Нет, нет ошибок консоли. Вот почему я смущен. –

+0

И это на сервере? Ajax не работает из файловой системы – charlietfl

ответ

0

Хорошо, это была очень глупая ошибка, которую я сделал.

Просто изменилось следующее:

<html ng-app> 

к:

<html ng-app="smapp"> 
3

маршрутизации в приложении не работает, потому что вы просто открыть index.html непосредственно из браузера. Чтобы исправить это, вам нужно будет обслуживать ваш код с веб-сервера и получать доступ к нему на localhost. Если у вас установлена ​​Node.Js, вы можете использовать экспресс для запуска сервера.

Вы должны запустить свой код следующим способом

Шаг 1: -

Сначала добавьте нг-приложение = "smapp" к index.html

Чем

Создать каталог следующим образом: -

*Public 
    *views 
     *home.html 
    *js 
     *app.js 
     *factory.js 
     *OmdbCtrl.js 
    *index.html 
*server.js 

Шаг 2: -

Put следующий код в внутри "server.js"

var express = require('express'); 
var path = require('path'); 
var app = express(); 

app.use(express.static(path.join(__dirname, 'public'))); 

// catch 404 and forward to error handler 
app.use(function(req, res, next) { 

    var err = new Error('Not Found'); 
    err.status = 404; 
    next(err); 
}); 

// error handlers 

// development error handler 
// will print stacktrace 
if (app.get('env') === 'development') { 
    app.use(function(err, req, res, next) { 
    res.status(err.status || 500); 
    res.render('error', { 
     message: err.message, 
     error: err 
    }); 
    }); 
} 

// production error handler 
// no stacktraces leaked to user 
app.use(function(err, req, res, next) { 
    res.status(err.status || 500); 
    res.render('error', { 
    message: err.message, 
    error: {} 
    }); 
}); 

app.listen(3000); 
console.log("server is listening at port 3000"); 
module.exports = app; 

Шаг 3: -

Запуск приложения из server.js пути as,

* npm install

Чем

* узла server.js

Шаг 4: -

Это будет открыть приложение в браузере по умолчанию.Если нет, то вы можете открыть его вручную следующим образом,

****** http://localhost:3000 **

Примечание: -

Скриншот Appication: -

enter image description here

0

Я мог бы нашел две ошибки в коде выше. 1- Вы должны добавить название приложения

<html ng-app="smapp"> 

2- В вашем OmdbCtrl ваш инъекционных OmdbFactory, Там должно быть проблемой в вашем заводе. Поскольку вы не добавили заводской код выше. Я только что удалил службы от контроллера и его работой довольно хорошо, и я был столом для решения {{теста}}

appRoot.controller('OmdbCtrl', ['$scope', function ($scope) { 
    $scope.test = 'working'; 
}]); 

Вы должны должны перепроверить вашу службу, или отправить отправить код.

Смежные вопросы