В Части 1 мы создали спокойный API с использованием рельсов.
Во Части 2 мы создали наш конвейер ресурсов для использования angular и установили Bower.
В третьей части мы создали базовое приложение angular с вложенными маршрутами, используя UI.router.
В части 4 мы собираемся использовать $resource для создания интерфейса нашего приложения Angular с нашим API RESTful Rails.
Если вы это сделали, прежде чем приступить к этому разделу, убедитесь, что вы выполнили части 1–3, в противном случае это может работать неправильно.
Шаг: 1 Проверка нашей базы данных
Еще в части 1 мы создали простую базу данных с одной записью примечания.
Если вы этого не сделали, выполните следующую команду в корневом каталоге приложения для заметок.
$ rails c 2.2.1 :001 > @note = Note.create(title: 'First Note', body: 'This is my first note')
Это создаст наш первый объект заметки.
В последнем уроке внутри нашего контроллера заметок у нас есть массив объектов
ctrl. notes = [
{
title: 'first note',
body: 'this is my first note'
},
{
title: 'second note',
body: 'this is my second note'
}
];
наша первая цель с ресурсом — теперь очистить этот массив и получить объекты из нашей базы данных Active Record в нашем приложении rails.
В настоящее время нам требуется ngResource. $resource — это служба, используемая для вызовов API, и в нее встроен CRUD. Итак, сначала убедитесь, что ngResource внедрен в ваш файл app.js.
angular
.module('app', ['ui.router', 'ngResource', 'templates')
Мы должны быть настроены и готовы к работе.
Шаг: 2 Создание запроса()
Первое, что мы хотим сделать, это подключить наш .state('notes'), чтобы мы могли видеть все наши заметки, хранящиеся в базе данных.
Сначала нам нужно сделать фабрику. Пожалуйста, создайте следующий файл.
app/assets/javascripts/angular-app/models/note.js
нам нужно использовать наш $resource внутри этой модели.
# app/assets/javascripts/angular-app/models/note.js
angular
.module('app')
.factory('Note', Note)
function Note($resource) {
var Note = $resource('http://localhost:3000/api/v1/notes/:id.json', {id: '@id'}, {
update: { method: 'PUT' }
});
return Note;
}
Теперь, когда у нас есть фабрика Note, у нас есть доступ к нескольким методам.
- получить()
- запрос()
- спасти()
- Удалить()
- Удалить()
Давайте используем query() в нашем NotesController.js.
angular
.module('app')
.controller('NotesController', NotesController);
function NotesController(Note) {
var ctrl = this;
// change our ctrl.notes = []; to query the entire Note table
ctrl.notes = Note.query();
};
Теперь, когда мы загружаем наш браузер по адресу localhost:3000/#/notes, мы должны увидеть единственную заметку внутри нашей базы данных.
Шаг: 3 новая заметка()
Теперь, когда наша фабрика построена с использованием $resource, мы можем создавать экземпляры этой фабрики и создавать новые записи внутри нашей базы данных.
давайте создадим новый контроллер для этого.
# app/assets/javascripts/angular-app/controller/NewNoteController.js
angular
.module('app')
.controller('NewNoteController', NewNoteController);
function NewNoteController(Note, $location) {
// we will use $location to route back to another state
var ctrl = this;
// make a new note
ctrl.note = new Note();
ctrl.addNote = function() {
ctrl.note.$save(function() {
$location.path('notes');
});
};
}
Мы будем использовать метод addNote() внутри формы @ new.html. Вы заметите $location. Это используется, чтобы направить нас обратно к нашему маршруту «заметок», и мы должны увидеть там новую заметку, но сначала нам нужно исправить две вещи. 1 наш контроллер app.js .state для «home.new» и наш файл home/new.html.
# app.js
.....
.state('home.new', {
url: 'new',
templateUrl: 'home/new.html',
// use our NewNoteController, so that our form has access to it.
controller: 'NewNoteController as ctrl'
})
......
наш взгляд:
# home/new.html <h1>Add note</h1> <form validate ng-submit=”ctrl.addNote()”> <label>Title</label> <input type=”text” ng-model=”ctrl.note.title”> <label>Content</label> <input type=”text” ng-model=”ctrl.note.body”> <input type=”submit” value=”Add Note”> </form>
с ng-submit, когда мы нажимаем кнопку «Добавить заметку», мы создаем новый объект в нашей базе данных. Идите вперед и загрузите localhost:3000/#/new и создайте новую запись. После того, как вы нажмете кнопку «Добавить заметку», вы также должны пройти по маршруту /#/notes, и вы должны увидеть свою новую заметку.
Шаг: 4 Note.get()
Таким образом, мы можем запросить всю нашу таблицу базы данных и вставить ее в нашу таблицу, но как нам получить конкретную строку из нашей таблицы? Мы собираемся «получить ()» это.
Давайте создадим новое представление для отображения этой отдельной заметки.
app/assets/javascripts/templates/home/show.html
<h3>{{ ctrl.note.title }}</h3>
<p>
{{ ctrl.note.body }}
</p>
Нам также необходимо добавить шаблоны к нашим маршрутам, и мы собираемся изменить наши маршруты. Пожалуйста, скопируйте следующую информацию, поскольку она изменилась по сравнению с нашими исходными маршрутами.
angular
.module(‘app’, [‘ui.router’, ‘ngResource’, ‘templates’])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state(‘home’, {
url: ‘/’,
templateUrl: ‘home.html’,
controller: ‘HomeController as ctrl’
})
.state(‘home.notes’, {
url: ‘notes’,
templateUrl: ‘home/notes.html’,
controller: ‘NotesController as ctrl’
})
.state(‘home.new’, {
url: ‘new’,
templateUrl: ‘home/new.html’,
controller: ‘NewNoteController as ctrl’
})
.state(‘home.note’, {
url: ‘note/:id’,
templateUrl: ‘home/show.html’,
controller: ‘ViewNoteController as ctrl’
});
$urlRouterProvider.otherwise(‘/’);
});
Теперь давайте обновим наш home/notes.html
<h1>Notes</h1>
<ul>
<li ng-repeat=”note in ctrl.notes”>
<h3>{{ note.title }}</h3>
<p>
{{ note.body }}
</p>
<a href=”#” ui-sref=”home.note({id: note.id})”>View Note</a>
</li>
</ul>
Это даст нам ссылку на страницу показа каждой заметки. Нам не хватает еще одной вещи, нашего контроллера. Создайте этот контроллер и добавьте следующий код.
angular
.module(‘app’)
.controller(‘ViewNoteController’, ViewNoteController);
function ViewNoteController(Note, $stateParams) {
var ctrl = this;
ctrl.note = Note.get({ id: $stateParams.id });
}
Снова загрузите браузер, и вы сможете просматривать заметки каждого отдельного человека.
Шаг: 5 $обновить()
Нам по-прежнему не хватает нашей функции редактирования заметок, позволяющей добавить ее в маршруты файлов app.js.
# app/assets/javascripts/angular-app/app.js
.state(‘home.edit’, {
url: ‘edit/:id’,
templateUrl: ‘home/edit.html’,
controller: ‘EditNoteController as ctrl’
})
Наш новый EditNoteController
# app/assets/javascripts/angular-app/controllers/EditNoteController.js
angular
.module(‘app’)
.controller(‘EditNoteController’, EditNoteController);
function EditNoteController(Note, $location, $stateParams) {
var ctrl = this;
ctrl.note = Note.get({ id: $stateParams.id });
ctrl.editNote = function() {
ctrl.note.$update(function() {
$location.path(‘notes’);
});
};
}
Это возьмет наш текущий $stateParams :id для поиска этого идентификатора в нашей базе данных. Теперь мы можем редактировать нашу заметку в нашей форме.
Давайте создадим нашу форму edit.html
# app/assets/javascripts/templates/home/edit.html <h1>Edit note</h1> <form validate ng-submit=”ctrl.editNote()”> <label>Title</label> <input type=”text” ng-model=”ctrl.note.title”> <label>Content</label> <input type=”text” ng-model=”ctrl.note.body”> <input type=”submit” value=”Update Note”> </form>
Он очень похож на наш new.html, мы просто изменили функцию в нашем ng-submit. Мы можем преобразовать это позже в партиал, но сейчас мы оставим его.
Теперь у нас есть возможность редактировать наши заметки, но нам нужна ссылка на наш новый маршрут. Давайте добавим это в наш файл home/notes.html:
# home/notes.html
<h1>Notes</h1>
<ul>
<li ng-repeat=”note in ctrl.notes”>
<h3>{{ note.title }}</h3>
<p>
{{ note.body }}
</p>
<a href=”#” ui-sref=”home.note({id: note.id})”>View Note</a>
<a href=”#” ui-sref=”home.edit({id: note.id})”>Edit Note</a>
</li>
</ul>
И home/show.html:
# home/show.html
<h3>{{ ctrl.note.title }}</h3>
<p>
{{ ctrl.note.body }}
</p>
<a href=”#” ui-sref=”home.edit({id: ctrl.note.id})”>Edit Note</a>
Давайте теперь перейдем к нашему браузеру и отредактируем эти файлы.
Шаг: 6 $удалить()
Теперь пришло время добавить последнюю часть CRUD. Уничтожить/удалить.
Давайте добавим метод в наш NotesController.js.
# controllers/NotesController.js
angular
.module(‘app’)
.controller(‘NotesController’, NotesController);
function NotesController(Note, $location, $state) {
var ctrl = this;
ctrl.notes = Note.query();
ctrl.deleteNote = function(note) {
note.$delete(function() {
$state.go($state.current, {}, {reload: true});
});
};
};
Это удалит нашу заметку и перезагрузит наше текущее состояние «заметок».
Давайте добавим эту функцию в наш notes.html.
# home/notes.html
<h1>Notes</h1>
<ul>
<li ng-repeat=”note in ctrl.notes”>
<h3>{{ note.title }}</h3>
<p>
{{ note.body }}
</p>
<a href=”#” ui-sref=”home.note({id: note.id})”>View Note</a>
<a href=”#” ui-sref=”home.edit({id: note.id})”>Edit Note</a>
<a href ng-click=”ctrl.deleteNote(note)”>Delete Note</a>
</li>
</ul>
Теперь у нас должна быть ссылка для удаления нашей заметки на нашей странице «заметки». Запустите сервер rails и перейдите на localhost:3000/#/notes и посмотрите, сможете ли вы удалить заметку.
Поздравляем!!!!
Вы только что создали базовое приложение CRUD с использованием Angular.js и Rails.
Пожалуйста, оставьте любые комментарии, вопросы или рекомендации, которые у вас есть ниже.
Спасибо
