hujung hadapan web
tutorial js
Garis panduan pengaturcaraan untuk mencipta aplikasi satu halaman menggunakan AngularJS_AngularJS
Garis panduan pengaturcaraan untuk mencipta aplikasi satu halaman menggunakan AngularJS_AngularJS
Ikhtisar
Apl halaman tunggal semakin popular pada masa kini. Mana-mana tapak web yang meniru gelagat aplikasi satu halaman boleh memberikan rasa aplikasi mudah alih/tablet. Angular boleh membantu kami mencipta aplikasi sedemikian dengan mudah
Aplikasi mudah
Kami akan mencipta apl ringkas yang melibatkan halaman rumah, tentang dan hubungi kami. Walaupun Angular direka untuk mencipta aplikasi yang lebih kompleks daripada ini, tutorial ini menunjukkan banyak konsep yang kami perlukan dalam projek yang lebih besar.
Matlamat
- Aplikasi satu halaman
- Tiada perubahan muat semula halaman
- Setiap halaman mengandungi data yang berbeza
Walaupun fungsi di atas boleh dicapai menggunakan Javascript dan Ajax, dalam aplikasi kami, Angular boleh memudahkan kami mengendalikannya.
Struktur Dokumen
- - script.js - index.html
- - halaman
- ----- home.html
- ----- tentang.html
- ----- contact.html
Halaman HTML
Bahagian ini agak mudah. Kami menggunakan Bootstrap dan Font Awesome. Buka fail index.html anda, dan kemudian kami menggunakan bar navigasi untuk menambah reka letak yang mudah.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
<!-- FOOTER -->
<footer class="text-center">
View the tutorial on <a href="http://scotch.io/tutorials/angular-routing-and-templating-tutorial">Scotch.io</a>
</footer>
</body>
</html>
Aplikasi Sudut
Model dan Pengawal
Pada ketika ini kami bersedia untuk menyediakan aplikasi kami. Mari buat model sudut dan pengawal terlebih dahulu. Mengenai model dan pengawal, lihat dokumentasi untuk mendapatkan maklumat lanjut.
Pertama, kami perlu mencipta model dan pengawal kami dalam javascript, kami meletakkan operasi ini dalam skrip.js:
// script.js
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', []);
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
<!-- index.html -->
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
...
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
{{ message }}
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
ng-view ialah arahan sudut yang digunakan untuk memasukkan templat laluan semasa (/home, /about, atau /contact) Ia akan mendapatkan fail berdasarkan laluan tertentu dan meletakkannya ke dalam reka letak utama (index .html ).
Kami akan menambah kod ng-view pada tapak dalam div#main untuk memberitahu Angular di mana hendak meletakkan halaman yang kami paparkan.
<!-- index.html --> ... <!-- MAIN CONTENT AND INJECTED VIEWS --> <div id="main"> <!-- angular templating --> <!-- this is where content will be injected --> <div ng-view></div> </div> ...
Memandangkan kami mencipta aplikasi satu halaman dan tidak mahu halaman itu dimuat semula, kami akan menggunakan keupayaan penghalaan sudut.
Mari kita lihat fail Angular kami dan tambahkannya pada apl kami. Kami akan menggunakan $routeProvider dalam Angular untuk mengendalikan penghalaan kami. Dengan cara ini, Angular akan mengendalikan semua permintaan ajaib dengan mengambil fail baharu dan menyuntiknya ke dalam reka letak kami.
AngularJS 1.2 dan PenghalaanSelepas versi 1.1.6, model ngRoute tidak lagi disertakan dalam Angular. Anda perlu menggunakan model dengan mengisytiharkannya pada permulaan dokumen. Tutorial ini telah dikemas kini untuk AngularJS1.2:
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
Untuk melengkapkan tutorial ini, kami hanya perlu mentakrifkan halaman yang akan disuntik Kami juga akan membuat setiap daripadanya memaparkan mesej daripada pengawal yang dikaitkan dengannya.
Jalankan secara setempat: Penghalaan sudut hanya akan berfungsi dalam persekitaran yang anda tetapkan untuknya. Anda perlu memastikan anda menggunakan http://localhost atau beberapa jenis persekitaran Jika tidak sudut akan mengatakan bahawa permintaan merentas domain menyokong HTTP.
Animasi untuk aplikasi Sudut
Setelah anda menyelesaikan semua penghalaan, anda boleh mula bermain dengan tapak anda dan menambahkan animasi padanya, anda perlu menggunakan modul ngAnimate yang disediakan oleh angular Kemudian anda boleh Gunakan CSS animasi untuk menukar paparan secara animasi
SEO pada Apl Halaman Tunggal
Sebaik-baiknya, teknik ini mungkin digunakan dalam aplikasi di mana pengguna log masuk. Anda sememangnya tidak mahu halaman yang peribadi kepada pengguna tertentu diindeks oleh enjin carian Contohnya, anda tidak mahu akaun pembaca anda, halaman log masuk Facebook atau halaman CMS blog diindeks.
Jika anda mahu melakukan SEO untuk apl anda, maka bagaimanakah anda menjadikan SEO berkesan pada apl/tapak yang menggunakan js untuk membina halaman Enjin carian sukar memproses apl ini kerana kandungannya dibina secara dinamik oleh penyemak imbas? , dan Tidak kelihatan kepada perangkak.
Jadikan apl anda mesra SEO
Teknik yang menjadikan aplikasi halaman tunggal js mesra SEO memerlukan penyelenggaraan biasa Menurut syor Google rasmi, anda perlu membuat gambar HTML Gambaran keseluruhan cara ia berfungsi adalah seperti berikut:
- Perangkak akan menemui URL mesra (http://scotch.io/seofriendly#key=value)
- Kemudian perangkak akan meminta pelayan untuk kandungan yang sepadan dengan URL ini (dengan cara yang diubah suai khas)
- Pelayan web akan menggunakan petikan HTML untuk mengembalikan kandungan
- Syot kilat HTML akan diproses oleh perangkak
- Kemudian hasil carian akan menunjukkan URL asal
Untuk mendapatkan maklumat lanjut tentang proses ini, lihat AJAX Crawler Google dan panduan mereka tentang Membuat Syot Kilat HTML.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
2022年最新5款的angularjs教程从入门到精通
Jun 15, 2017 pm 05:50 PM
Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。
Gunakan PHP dan AngularJS untuk membina tapak web responsif untuk menyediakan pengalaman pengguna yang berkualiti tinggi
Jun 27, 2023 pm 07:37 PM
Dalam era maklumat hari ini, laman web telah menjadi alat penting untuk orang ramai mendapatkan maklumat dan berkomunikasi. Tapak web responsif boleh menyesuaikan diri dengan pelbagai peranti dan memberikan pengguna pengalaman berkualiti tinggi, yang telah menjadi tumpuan dalam pembangunan tapak web moden. Artikel ini akan memperkenalkan cara menggunakan PHP dan AngularJS untuk membina tapak web responsif untuk memberikan pengalaman pengguna yang berkualiti tinggi. Pengenalan kepada PHP PHP ialah bahasa pengaturcaraan sisi pelayan sumber terbuka yang sesuai untuk pembangunan web. PHP mempunyai banyak kelebihan, seperti mudah dipelajari, merentas platform, perpustakaan alat yang kaya, kecekapan pembangunan
Bina aplikasi web menggunakan PHP dan AngularJS
May 27, 2023 pm 08:10 PM
Dengan pembangunan berterusan Internet, aplikasi Web telah menjadi bahagian penting dalam pembinaan maklumat perusahaan dan cara kerja pemodenan yang diperlukan. Untuk menjadikan aplikasi web mudah dibangunkan, diselenggara dan dikembangkan, pembangun perlu memilih rangka kerja teknikal dan bahasa pengaturcaraan yang sesuai dengan keperluan pembangunan mereka. PHP dan AngularJS ialah dua teknologi pembangunan web yang sangat popular. Kedua-duanya adalah penyelesaian bahagian pelayan dan bahagian pelanggan. Penggunaan gabungan mereka boleh meningkatkan kecekapan pembangunan dan pengalaman pengguna aplikasi web. Kelebihan PHPPHP
Gunakan PHP dan AngularJS untuk membangunkan platform pengurusan fail dalam talian untuk memudahkan pengurusan fail
Jun 27, 2023 pm 01:34 PM
Dengan populariti Internet, semakin ramai orang menggunakan rangkaian untuk memindahkan dan berkongsi fail. Namun, atas pelbagai sebab, pengurusan fail menggunakan kaedah tradisional seperti FTP tidak dapat memenuhi keperluan pengguna moden. Oleh itu, mewujudkan platform pengurusan fail dalam talian yang mudah digunakan, cekap dan selamat telah menjadi satu trend. Platform pengurusan fail dalam talian yang diperkenalkan dalam artikel ini adalah berdasarkan PHP dan AngularJS Ia boleh melakukan muat naik, memuat turun, mengedit, memadam dan operasi lain dengan mudah, dan menyediakan satu siri fungsi yang berkuasa, seperti perkongsian fail, carian,
Cara menggunakan PHP dan AngularJS untuk pembangunan bahagian hadapan
May 11, 2023 pm 05:18 PM
Dengan populariti dan perkembangan Internet, pembangunan bahagian hadapan menjadi semakin penting. Sebagai pembangun bahagian hadapan, kita perlu memahami dan menguasai pelbagai alatan dan teknologi pembangunan. Antaranya, PHP dan AngularJS adalah dua alat yang sangat berguna dan popular. Dalam artikel ini, kami akan menerangkan cara menggunakan kedua-dua alat ini untuk pembangunan bahagian hadapan. 1. Pengenalan kepada PHP PHP ialah bahasa skrip bahagian pelayan sumber terbuka yang popular Ia sesuai untuk pembangunan web dan boleh dijalankan pada pelayan web dan pelbagai sistem pengendalian. Kelebihan PHP adalah kesederhanaan, kelajuan dan kemudahan
Bina aplikasi web satu halaman menggunakan Flask dan AngularJS
Jun 17, 2023 am 08:49 AM
Dengan perkembangan pesat teknologi Web, Aplikasi Web Halaman Tunggal (SinglePage Application, SPA) telah menjadi model aplikasi Web yang semakin popular. Berbanding dengan aplikasi web berbilang halaman tradisional, kelebihan terbesar SPA ialah pengalaman pengguna lebih lancar, dan tekanan pengkomputeran pada pelayan juga sangat berkurangan. Dalam artikel ini, kami akan memperkenalkan cara membina SPA mudah menggunakan Flask dan AngularJS. Flask ialah Py ringan
Bagaimana untuk menggunakan AngularJS dalam pengaturcaraan PHP?
Jun 12, 2023 am 09:40 AM
Dengan populariti aplikasi web, rangka kerja bahagian hadapan AngularJS telah menjadi semakin popular. AngularJS ialah rangka kerja JavaScript yang dibangunkan oleh Google yang membantu anda membina aplikasi web dengan keupayaan aplikasi web dinamik. Sebaliknya, untuk pengaturcaraan bahagian belakang, PHP ialah bahasa pengaturcaraan yang sangat popular. Jika anda menggunakan PHP untuk pengaturcaraan sisi pelayan, maka menggunakan PHP dengan AngularJS akan membawa lebih banyak kesan dinamik ke tapak web anda.
AngularJS基础入门介绍
Apr 21, 2018 am 10:37 AM
这篇文章介绍的内容是关于AngularJS基础入门介绍，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下。
