NotBu öğreticiyi yürütmek için net bir temele sahip olmanız önerilir. AngularJS, çünkü bu teknolojinin bazı teknik yönleri hakkında ayrıntılara girmeyeceğiz.
Biz bilirken, AngularJS Bugün için bir web veya mobil uygulama oluştururken kullanışlı olan çok sayıda modül, hizmet ve filtre sağlar. Bu çerçevenin özünde bulamadığımız başka modüller de var, bunlardan biri ngRoute. Bu modül, kendisine bir kontrolör ve Ajax üzerinden otomatik olarak çağrılan bir şablon atayarak kolay URL'ler kullanma işlevine sahiptir.
ngRoute hakkında daha fazla bilgi:
ngRoute'u kullanma
İlk önce proje dizinimizi oluşturuyoruz, ona routeapp diyeceğiz, bu dizin içinde public adında bir başkasını oluşturuyoruz, public olarak bir index.html dosyası oluşturuyoruz. Şimdi public içinde, açısal dosyalarımızı yerleştireceğimiz js adında bir dizin oluşturuyoruz. js'nin içine app.js ve controller.js adlı ilk iki dosyayı yerleştirmeye başlıyoruz.
Angularjs'nin tüm güncel sürümlerini şu bağlantıdan edinebiliriz: https://code.angularjs.org/. Öğreticiyi kullanmak için 1.5.5 sürümünü kullanacağız https://code.angularjs.org/1.5.5/
index.html kodu
Dinamik Ng RotasıApp.js kodu
angular.module ('routeapp', ['ngRoute', 'routeapp.controller']);Controller.js kodu
angular.module ('routeapp.controller', []) .controller ('MainController', function () {console.log ('AngularJS');});Şimdi bunu bir web sunucusunda çalıştırıyoruz. Apache, nginx, Tomcat vb. gibi istediğiniz her şeyi kullanabilirsiniz. Benim durumum için nodejs'den ekspres kullanacağım. Siz de nodejs ile yapmak istiyorsanız aşağıdaki adımları takip edebilirsiniz. Nodejs'i hiç kullanmadıysanız, açıklandığı aşağıdaki öğreticiyi takip edebilirsiniz:
- npm, bower ve grunt ile ön uç mimarisi oluşturun.
Komut satırından projenin kök dizininde aşağıdaki komutu kullanıyoruz.
npm ini
npm install --save-dev expressSonra hızlı kurulum adlı projenin kökünde bir dosya oluşturuyoruz server.js ve aşağıdaki kodu ekliyoruz:
var ekspres = gerektirir ('ekspres'); var app = ekspres (); var port = Sayı (process.env.PORT || 3000); app.use (express.static (__ dizin adı + '/ genel')); app.listen (bağlantı noktası, işlev () {console.log ('Uygulama http://localhost:' + bağlantı noktasında başladı);});Şimdi şu komutu yürütüyoruz:
düğüm sunucusu.jsweb sunucusunu başlatmak için
Web sunucusunu başlattığınızda, tarayıcınızın eleman denetçisi konsolunun kelimeyi yazdığını doğrulayın. AngularJS.
şimdi yapalım ngRoute kullanımı.
Rotaları kullanma
kullanacağız açısal yapılandırma işlevi web uygulamamızın rotalarını oluşturmak için.
.config (işlev ($ routeProvider) {$ routeProvider .When ('/ home', {templateUrl: 'tpl / home.html', controller: 'HomeController'}) .diğer türlü ({redirectTo: '/ home'}); }) App.js kodu- /ev: ana sayfamız için URI.
- şablonURL'si: ev için şablonumuzun yolu.
- denetleyici: Ana şablon için atanan denetleyici.
- Aksi takdirde: Web sitemizi varsayılan olarak / ana sayfaya yerleştirin
index.html gövdesinin içine özniteliği olan bir div etiketi ekliyoruz ng-view home.html şablonunu ve öğreticide oluşturacağımız gelecekteki şablonları oluşturmaktan kim sorumlu olacak.
ngView hakkında bilgi:
index.html'deki kod:
Ev denetleyicisini ekliyoruz controller.js .controller ('HomeController', function () {console.log ('HomeController');})Her şey yolunda giderse, aşağıdaki görüntüye benzer bir şey elde etmelisiniz:
Veri kalıcılığı
Route servisimizin doğru çalıştığını zaten test ettik, kullanıcıları yönetmek için bir modül oluşturmaya devam ediyoruz, bu modülde kullanıcıları oluşturabilir, listeleyebilir, düzenleyebilir ve silebiliriz. Öğretici için bir arka uçla iletişim kurmamıza gerek yok; bir dizi ile veri kalıcılığı yapacağız, bu verilerin geçici olduğu ve uygulamayı her yenilediğimizde söz konusu verilerin kaybolacağı anlamına gelir.
Aşağıdaki dosyaları oluşturarak başlıyoruz services.js Y değerler.js js dizini içinde
angular.module ('routeapp.values', []) .value ('Kullanıcılar', []); Values.js kodu
angular.module ('routeapp.services', ['routeapp.values']) .factory ('Veritabanları', ['Kullanıcılar', işlev (Kullanıcılar) {return {DataUser: {add: function (kullanıcı)) {Users.push (user);}, list: function () {return Users;}, update: function (index, user) {return Users [index] = user;}, get: function (index) {return Users [index];} , yok et: function (index) {return Users.splice (index, 1);}}};}]) .factory ('Util', [function () {return {clone: function (obj)) {if ( null = = nesne || "nesne"! = nesne türü) dönüş nesnesi; var kopya = nesne.yapıcı (); for (nesnedeki var attr) {if (obj.hasOwnProperty (attr)) kopya [attr] = nesne [ attr];} kopyayı döndür;}}}]); Services.js kodu
Services js'de adı verilen iki fabrika oluşturuyoruz. veritabanları Y İşe yarar.
- Veritabanları: Kullanıcı kayıtları verilerinin kalıcılığına dikkat edecektir. (ekleme, güncelleme, listeleme, alma, yok etme işlevlerini kullanarak).
- İşe yarar: Bir kullanıcıyı kaydettiğimizde ihtiyaç duyacağımız verilerin bir klonlayıcısı olarak hizmet edecektir.
Services modülünü app.js'mize enjekte ediyoruz
routeapp.servicesapp.js'nin ilk satırının kodu şöyle görünür:
angular.module ('routeapp', ['ngRoute', 'routeapp.controller', 'routeapp.services'])Şimdi sadece services.js ve değerleri.js komut dosyalarını index.html'ye kaydetmemiz, uygulamanın yürütülmesinde herhangi bir rahatsızlıktan kaçınmak için bunları app.js komut dosyasının önüne yerleştirmemiz gerekiyor.
Devam etmeden önce uygulamamızın geliştirme konsolunda hata vermediğini test edelim. Şimdiye kadar dosyalar bu şekilde oluşturuldu.
Kullanıcıların kaydı ve listesi için şablonlar oluşturmaya devam ediyoruz. tpl içinde user.html ve user-list.html için oluşturuyoruz
Kullanıcı Adı Adı E-posta Kaydetkullanıcı.html kodu
| kullanıcı | İsim | Posta |
|---|---|---|
| {{item.kullanıcıadı}} | {{öğe adı}} | {{öğe.e-posta}} |
İçinde controller.js user.html ve user-list.html için denetleyiciyi ekliyoruz
.controller ('UserController', işlev ($ kapsam, Veritabanları, Util) {$ kapsam.kullanıcı = {}; $ kapsam.save = işlev () {var kullanıcı = Util.clone ($ kapsam.kullanıcı); Databases.DataUser .add (kullanıcı); $ kapsam.kullanıcı = {};};}) .controller ('UserListController', işlev ($ kapsam, Veritabanları) {$ kapsam.dataUser = Databases.DataUser.list ();})Controller.js kodu
İki şablona erişmek için bağlantıları index.html'ye ekleyin:
- Kullanıcıyı Kaydet
- Kullanıcıya Danışın
Sadece oluşturduğumuz yeni rotaları app.js yapılandırmasına eklememiz, onları önce yerleştirmemiz gerekiyor. aksi halde işlev:
.When ('/ user', {templateUrl: 'tpl / user.html', controller: 'UserController'}) .while ('/ user / list', {templateUrl: 'tpl / user-list.html', controller : 'UserListController'}) Şimdiye kadar her şeyin nasıl gittiğini görelim.
BÜYÜT
Birden çok kullanıcıyı kaydederek ve şu adresten doğru şekilde kaydolduklarını doğrulayarak test edin. Kullanıcılara danışın.
Hazır, şimdi kullanıcıları güncelleme ve ortadan kaldırma ile devam ediyoruz. Bir kullanıcıyı güncellemek için, sadece yeni işlevler ekleyin. Kullanıcı Denetleyicisi, bu yeni kod için önceki kodu değiştiriyoruz:
.controller ('UserController', function ($ kapsam, Veritabanları, Util, $ routeParams, $ konum) {var userID = $ routeParams.userID; var isEdit = (userID! = tanımsız); $ kapsam.user = {}; if (isEdit) {$scope.user = Databases.DataUser.get (userID);} $scope.save = function () {var user = Util.clone ($scope.user); if (isEdit) {Databases.DataUser. update (userID, user); $ location.path ('/ user / list');} else {Databases.DataUser.add (user);} $scope.user = {};};}) Yeni kodun açıklaması:- $ routeParams: Bu hizmet, uygulamamızın GET parametrelerini döndürecektir, bu durumda güncelleme yapacağımız kullanıcının kimliğini döndürmek için kullanacağız. $ routeParams.userID. $ routerParams https hakkında daha fazla bilgi: //docs.angular … ce / $ routeParams
Ayrıca app.js'nin yapılandırmasına yeni bir yol eklemeliyiz:
.When ('/ user /: userID', {templateUrl: 'tpl / user.html', controller: 'UserController'})Bu yeni yolu '/ user / list' yolunun altına yerleştirmek önemlidir, böylece bahsedilen liste ile bize bir çelişki sunacaktır.
- '/ kullanıcı /: kullanıcı kimliği': Gördüğümüz gibi, bu URL'de userID adında özel bir şey var, bu UserController'da kullanacağımız parametre.
Geriye sadece user-list.html'de kayıtlı kullanıcıyı düzenlemek için bir bağlantı ekleyeceğimiz yeni bir sütun eklemek kalıyor.
user-list.html'deki kodDüzenlemek
Şimdi sadece bu yeni işlemi test etmemiz, uygulamayı yenilememiz, kaydolmamız ve ardından kullanıcıyı düzenlememiz gerekiyor.
Yalnızca kullanıcıları silmek için işlevsellik eklememiz gerekiyor. tpl'de user-delete.html adında yeni bir şablon oluşturuyoruz
kaldırmak istiyorsun {{Kullanıcı adı}}?Kaldırmak User-delete.html kodu
user-delete.html şablonuna erişmek için user-list.html tablosuna yeni bir bağlantı ekliyoruz
Controller.js'ye user-delete.html için UserDeleteController adlı denetleyiciyi ekleriz.Kaldırmak
.controller ('UserDeleteController', fonksiyon ($ kapsam, Veritabanları, $ routeParams, $ konum) {var kullanıcı kimliği = $ routeParams.userID; $ kapsam.kullanıcı = Veritabanları.DataUser.get (kullanıcı kimliği); $ kapsam.destroy = işlev ( ) {Databases.DataUser.destroy (userID); $ location.path ('/ kullanıcı / liste');}}) Ve yolu app.js'nin yapılandırmasına ekliyoruz
.When ('/ user / delete /: userID', {templateUrl: 'tpl / user-delete.html', denetleyici: 'UserDeleteController'})Uygulamayı yeniliyoruz, kayıt oluyoruz ve ardından kullanıcıyı kaldırma işlemini test ediyoruz.
Baz uygulamamızı bitirdik! Uygulamamızda manuel rota oluşturma konusunda zaten ustalaştık, ancak yakından bakarsak ve rotaların ne oluşturulduğunu görürsek:
- /ev
- / kullanıcı
- / Kullanıcı listesi
- / kullanıcı /: kullanıcı kimliği
- / kullanıcı / sil /: kullanıcı kimliği
Dinamik rotalar nasıl oluşturulur
Mevcut rotalarımıza yakından bakalım, yeni bir kullanıcı oluşturmak için rotayı/kullanıcıyı kullanıyoruz.
- Kullanıcıları / kullanıcıyı / listeyi sorgulamak için
- Düzenlemek için / kullanıcı /: kullanıcı kimliği
- / kullanıcı / silmek / silmek için: kullanıcı kimliği.
Sadece bir, iki veya üç parametrenin kullanıldığı bazı rotalar oluşturabiliriz ve bunlar onları yakalar, beğenimize kullanırız. Şuna benzer:
Bir şeyi netleştirmeliyiz, dinamik rotaların doğru çalışması için aşağıdaki kurallara uymamız gerekir, bunları açıklamak için aynı kullanıcı örneğini kullanacağız:
1. Kullanıcı adı hem şablon hem de denetleyici öneki olarak kullanılmalıdır.
2. Öğreticideki ikinci önek olarak sorgular için kelime listesini kullanıyoruz, aynı şekilde istediğiniz şekilde değiştirebilirsiniz, ancak kullandığınız kelimenin hem şablon adında hem de adında olması gerekir. kontrolörün. Ör: user-list.html ve UserListController; silmek için: user-delete.html ve UserDeleteController
3. Kontrolörlerdeki önekleri tanımlamak için büyük harfler kullanın.
4. Denetleyici adları her zaman Denetleyici sözcüğüyle bitmelidir.
var route = {denetleyici: 'RouteController', templateUrl: function (uri) {var pattern = new RegExp ("[0-9] +"); var part_uri = (! pattern.test (uri.param2) && typeof uri.param2! == 'tanımsız')? '-' + uri.param2: ''; 'tpl /' + uri.param1 + part_uri + '.html' döndür; }}; $ routeProvider .while ('/: param1', rota) .while ('/: param1 /: param2', rota) .while ('/: param1 /: param2 /: param3', rota) .aksi takdirde ({redirectTo: '/ev'}); app.js'deki kod
Üç yol kalıbı oluşturuyoruz, bu nedenle yalnızca tek bir parametreniz olduğunda / kullanıcı ve / ev için çalışır. İki parametre / kullanıcı / için: kullanıcı kimliği ve / kullanıcı / liste. Üç parametre için / kullanıcı / sil /: kullanıcı kimliği
Ayrıca URI'ye bağlı olarak farklı denetleyicilere rehberlik etmekten sorumlu olacak yeni bir denetleyici oluşturmamız gerekiyor.
.controller ('RouteController', function ($ kapsamı, $ routeParams, $ controller, $ filter) {var önek = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filtre ('prefixController') ( $ routeParams.param2); $ denetleyici (ön ek + 'Denetleyici', {$ kapsam: $ kapsam});}) RouteController kodu
Bu denetleyici sırayla bir filtreye bağlıdır, js dizininde filtreler.js adlı yeni bir dosya oluştururuz.
angular.module ('routeapp.filters', []) .filter ('prefixController', function () {return function (metin) {if (typeof text === 'undefined') {return '';} var p_string = new RegExp ('[az] + [0-9] *'); var p_int = new RegExp ("[0-9] +"); if (p_int.test (metin)) {return '';} else if (p_string.test (metin)) {return text.charAt (0) .toUpperCase () + ((text.length> 1)? text.slice (1): '');} else {return '';}};}); Filters.js kodu
Filtreyi app.js'ye enjekte ediyoruz
routeapp.filtersFilter.js komut dosyasını app.js'den önce yerleştirilen index.html dosyasına aktarırız
Son bir ayrıntıyı değiştirmemiz gerekiyor Kullanıcı Denetleyicisi Y UserDeleteController. Şu anda parametreleri kullanıyoruz: param1,: param2,: param3; parametre: kullanıcı kimliği artık kullanılamayacak. Kontrolörlerde değiştirmemiz gereken. UserController için param2'yi ve UserDeleteController için param3'ü kullanın.
kod Kullanıcı Denetleyicisi:
var userID = $ routeParams.param2;kod UserDeleteController:
var userID = $ routeParams.param3;Dinamik yönlendiricimizi sonlandırdık. Artık her şey bizim tarafımızdan kontrol edildiğinden, sitemize yeni rotalar oluşturma konusunda endişelenmemize gerek yok. YönlendiriciDenetleyici ve $ routerProvider'ın yeni yapılandırmasını, yeni şablonlar oluşturarak ve rotalarını ve denetleyicilerini atayarak test edebilirsiniz. Son olarak, sitemizde bulunmayan bir url'ye erişmeye çalışırken tespit etmemize yardımcı olabilecek yeni bir şablon oluşturabiliriz. 404 şablonunu kullanabiliriz, onu tpl'de 404.html adıyla oluşturacağız.
404.html için kod
404Denetleyici denetleyicisi
.controller ('404Controller', işlev () {})Kullanılamayan bir rotaya erişmeye çalışırken tespit edebilmemiz için bir angularjs dinleyicisi onunla kim ilgilenir. kodunu değiştiriyoruz Ana Denetleyici aşağıdakiler tarafından:
.controller ('MainController', function ($ kapsam, $ konum) {console.log ('AngularJS'); $ kapsam. $ on ('$ routeChangeError', function (sonraki, geçerli) {$ location.path ('/ 404 ');});}) Sadece uygulamayı çalıştırın ve sitemizde bulunmayan bir URL girin, örneğin http: // localhost: 300… bilinmeyen-url. Uygulama hemen / 404'e yönlendirilecek
Yapabilirsiniz bu eğitim demosunu indir Burada:
routeapp.zip 344.9K 259 İndirilenler
