Я новичок в angularJS и стараюсь учиться. У меня есть файл config.js
где я определяю мою конфигурационную функцию. Первая строка этого файла дает ошибку.
angular.module('app').config(function($routeProvider, $locationProvider){
$locationProvider.HTML5Mode(true);
$routeProvider
.when('/',{
templateUrl: 'index.html',
controller: 'MainController'
})
.when('/add', {
templateUrl: 'add.html',
controller: 'MainController',
controllerAs: 'main',
})
});
Ниже представлен файл app.js
angular.module('app',['ngRoute']);
В main.ctrl.js записывается моя функция контроллера.
angular.module('app').controller("MainController", function(){
var vm = this;
vm.title = 'TV Show';
vm.searchInput = '';
vm.shows = [
{
title: 'Game of Thrones',
year: 2011,
favorite: true
},
{
title: 'Walking Dead',
year: 2010,
favorite: false
},
{
title: 'Firefly',
year: 2002,
favorite: true
},
{
title: 'Banshee',
year: 2013,
favorite: true
},
{
title: 'Greys Anatomy',
year: 2005,
favorite: false
}
];
vm.orders = [
{
id: 1,
title: 'Year Ascending',
key: 'year',
reverse: false
},
{
id: 2,
title: 'Year Descending',
key: 'year',
reverse: true
},
{
id: 3,
title: 'Title Ascending',
key: 'title',
reverse: false
},
{
id: 4,
title: 'Title Descending',
key: 'title',
reverse: true
}
];
vm.order = vm.orders[0];
vm.new = {};
vm.addShow = function() {
vm.shows.push(vm.new);
console.log("vm.shows");
vm.new = {};
};
});
Теперь я создал страницу add.html, где я пытаюсь получить доступ к моему контроллеру (MainController), но я не могу получить к нему доступ. Не могли бы вы сказать мне, где я буду ошибаться
<!DOCTYPE html>
<html ng-app = 'app'>
<head lang="en">
<meta charset="UTF-8">
<title>Favourite TV Show</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
</head>
<body style="width: 60%; margin:0 auto;">
<h1>This is add page.</h1>
<h3>Add a new TV Show</h3>
{{main.title}}
{{main.shows[0].title}}
<form name="main.addForm" class="form" ng-submit="main.addShow()">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" ng-model="main.new.title" required />
</div>
<div class="form-group">
<label>Year</label>
<input type="number" min="1900" max="2030" class="form-control" ng-model="main.new.year" required />
</div>
<div class="row">
<div class="col-xs-6">
<label>Favorite: <input type="checkbox" ng-model="main.new.favorite" /></label>
</div>
<div class="col-xs-6">
<button class="btn btn-success pull-right"><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
</div>
</div>
</form>
</body>
</html>
Ниже приведен файл index.html. И я открываю страницу add.html, когда пользователь нажимает на новую кнопку show.
<body ng-app="app" ng-controller="MainController as main" style="width: 60%; margin:0 auto;">
<div class="container">
<h1>{{main.title}}</h1>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" ng-model="main.searchInput" style="width: 60%; margin:0 auto;">
</div>
<p>{{main.searchInput}}</p>
</div>
<a href=""><h3>A list of TV shows</h3></a>
<ul class="list-group">
<li class="list-group-item" ng-repeat="show in main.shows | filter:main.searchInput | orderBy:main.order.key:main.order.reverse" >
<span class="glyphicon glyphicon-star" ng-if="show.favorite"></span>
{{show.title}}
<span class="badge">{{show.year}}</span>
<i class="glyphicon glyphicon-edit"></i>
</li>
</ul>
<select class="form-control pull-right" ng-model="main.order" ng-options="order as order.title for order in main.orders"></select>
<div class="clearfix"></div>
</br>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6">
<a href="./add.html"><button class = "btn-primary pull-right">New Show</button></a>
</div>
</div>
Я запросил обновленный plunkr. Пожалуйста, взгляните на это. Несколько вещей, которые я заметил, и дать несколько советов:
Избегайте глобальных
Попробуйте использовать функции IIFE, чтобы обернуть ссылки на модули, а не оставить их в глобальном пространстве имен.
angular.module("app", ["ngRoute"]; // Your code
Предложение
(function() {
"use strict";
angular.module("app", ["ngRoute"];
})();
$ locationProvider.html5Mode (true) not $ locationProvider.HTML5Mode (true);
(function() {
angular
.module("app")
.config(function($routeProvider, $locationProvider) {
// $locationProvider.HTML5Mode(true); <-- your code
$locationProvider.html5Mode(true);
.... // rest of code
});
})();
Вы пытались ссылаться на угловой модуль, используя переменную app в файле config.js, но приложение никогда не определялось, опять же, если вы используете IIFE, вы можете ссылаться на него.
app.config(...) // app was not defined, had a reference error.
Вы можете ссылаться на него так:
(function () {
"use strict";
angular
.module("app")
.config(function() {
});
})();
Пожалуйста, дайте мне знать, если это то, что вы хотите, я буду обновлять по мере необходимости. Кроме того, я предоставил ссылку руководства по стилю Джона Папа, ее действительно хорошая и поддерживаемая Angular team, посмотрите. Я многому научился у него.
{{main.title}} {{main.shows[0].title}}
есть фрагмент кода {{main.title}} {{main.shows[0].title}}
Тем не менее я не могу получить к нему доступ.
data-ng-controller="MainController as main"
в data-ng-controller="MainController as main"
, и я рекомендую вам посмотреть в нг-зрения и модуль маршрутизации должным образом. То, как вы его настроили, не очень идеально. Другой вариант - взглянуть на ui-router
другой модуль маршрутизации для Angular.
В настоящее время вы напрямую добавили контент внутри тела. Я думаю, что html должен принадлежать add.html
. и при загрузке этого содержимого напрямую не загружается контроллер MainController
с main
MainController
.
Поскольку вы хотите увидеть изменения на странице ngRoute
вам нужно иметь директиву ng-view
на вашей странице. Что будет добавлять содержимое add.html
на странице динамически.
наценка
<body style="width: 60%; margin:0 auto;">
<ng-view></ng-view>
</body>
Add.html
<h1>This is add page.</h1>
<h3>Add a new TV Show</h3>
{{main.title}}
{{main.shows[0].title}}
<form name="main.addForm" class="form" ng-submit="main.addShow()">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" ng-model="main.new.title" required />
</div>
<div class="form-group">
<label>Year</label>
<input type="number" min="1900" max="2030" class="form-control" ng-model="main.new.year" required />
</div>
<div class="row">
<div class="col-xs-6">
<label>Favorite: <input type="checkbox" ng-model="main.new.favorite" /></label>
</div>
<div class="col-xs-6">
<button class="btn btn-success pull-right"><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
</div>
</div>
</form>
Также вы должны иметь controllerAs: 'main'
в маршруте по умолчанию
$routeProvider
.when('/',{
templateUrl: 'index.html',
controller: 'MainController',
controllerAs: 'main'
})