1. หลังจากใช้ Seed App AngularJS เพื่อติดตั้งเฟรมเวิร์กในขั้นต้นเราต้องเติมเต็มบางสิ่งด้วยตนเอง ก่อนอื่นให้เปิด index.html ภายใต้โฟลเดอร์แอพของเราและเพิ่ม JS และ CSS บางส่วนที่เราต้องใช้ (แน่นอนว่าเป็น bootstrap) รหัสมีดังนี้:
<script src = "lib/angular/angular.min.js"> </script> <script src = "lib/jQuery/jQuery-1.10.2.min.js"> </script> <script src = "lib/bootstrap/bootstrap.min.js" src = "js/services.js"> </script> <script src = "js/controllers.js"> </script> <script src = "js/filters.js"> </script> <script src = "script.js/filters.js"> </script> src = "js/filters.js"> </script> src = "js/directives.js"> </script>
แน่นอนโปรดจำไว้ว่าเราเพิ่งแนะนำที่นี่และเราจำเป็นต้องเพิ่ม JS และ CSS เหล่านี้จริงๆ คุณสามารถดูตำแหน่งเฉพาะจากรหัสแนะนำข้างต้นดังนั้นจึงไม่มีแผนที่ที่นี่
2. ก่อนอื่นให้ทำหน้าลงทะเบียนเข้าสู่ระบบที่ง่ายที่สุด ต่อไปนี้เป็นรหัสในแท็กตัวถังใน index.html:
<span style = "font-family: simsun; font-size: 14px;"> <div> <div> <div> <div> <div> <div> <a href = "#"> jthink </a> <ul> <li> <a href = "#/login"> ล็อกอิน </a> </div> </div> </div> </div> <div id = "เนื้อหา" ng-view> </div> </div> </div> </div> </div> <p> version1.0 </p> </div> </div> </div> </div> </div> </div> <div> <p> version1.0 </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <p>
3. อย่าลืมว่าเราจำเป็นต้องแก้ไขกฎการกำหนดเส้นทางใน App.js รหัสเฉพาะมีดังนี้:
'ใช้อย่างเข้มงวด'; // ประกาศโมดูลระดับแอพซึ่งขึ้นอยู่กับตัวกรองและบริการ Angular.module ('Jthink', ['Jthink.filters', 'Jthink.services', 'Jthink.directives']) config (['$ routeProvider', ฟังก์ชั่น ($ routeProvider) {$ routeProvider.when ('/login', {templateurl: 'partials/login.html', คอนโทรลเลอร์: myctrl2}); $ routeProvider.when ('/register', $ routeprovider.otherwise ({redirectto: '/login'});}]);4. หลังจากกำหนดกฎเหล่านี้แน่นอนว่าเราไม่สามารถ login.html และ register.html รหัสมีดังนี้:
เข้าสู่ระบบ. html
<div id = "เข้าสู่ระบบ" ng-controller = "เข้าสู่ระบบ"> <form> <div> <label for = "inputemail"> เข้าสู่ระบบ </label> </div> <div> <label for = "inputemail"> อีเมล </label> <div> สำหรับ = "inputPassword"> รหัสผ่าน </label> <div> <อินพุต type = "รหัสผ่าน" id = "inputpassword" placeholder = "รหัสผ่าน" ng-model = "login.password"> </div> </div> <div> <dark> <lable> </div> </form> </div>
register.html
<div id = "register"> <form> <div> <label for = "inputemail"> register </label> </div> <div> <label for = "inputemail"> อีเมล </label> <div> <อินพุต type = "text" id = "inputemail" pratstacter " id = "inputPassword" placeholder = "รหัสผ่าน"> </div> </div> <div> <label for = "inputpassword"> รหัสผ่าน </label> <div> <อินพุต type = "รหัสผ่าน" id = "อินพุต Password" password "password" placeholder = "ยืนยันรหัสผ่าน"> </div> </div> <div> <div> <button type = "ปุ่ม"> ลงทะเบียน </duck> </div> </dhorm> </div>
ไฟล์ที่ขาดไม่ได้ก็คือไฟล์ CSS แน่นอนว่านี่เป็นเรื่องง่ายเนื่องจาก bootstrap ทำงานส่วนใหญ่เสร็จสมบูรณ์แล้วเพิ่มรหัสเลย์เอาต์ต่อไปนี้ลงใน App.css:
<span style = "font-family: simsun; font-size: 14px;">/ * app css stylesheet */ html, body {ความสูง: 100%; } .wrap {min-height: 100%; ความสูง: อัตโนมัติ! สำคัญ; ความสูง: 100%; มาร์จิ้น: 0 auto -80px; } .header {ความสูง: 100%; ต่ำสุด: 100%; ความสูง: อัตโนมัติ! สำคัญ; } .footer {พื้นหลังสี: #333; สี: สีขาว; ความสูง: 80px; } .container .credit {margin: 10px 0; } #login. title label {font-size: 2em; Font-Weight: ตัวหนา; } #register .title label {font-size: 2em; Font-Weight: ตัวหนา; } </span>รหัสง่าย ๆ ดังกล่าวสามารถสร้างแผนกต้อนรับส่วนหน้าได้ค่อนข้างดี แม้ว่ามันจะค่อนข้างง่าย แต่ก็ยังสมเหตุสมผล:
ทั้งหมดนี้ต้องขอบคุณ bootstrap NodeJS จำเป็นต้องเริ่มต้นเมื่อเริ่มต้น สำหรับวิธีการเฉพาะโปรดดูบทความก่อนหน้า
5. โอเคนี่เกือบจะถูกนำไปใช้ มันค่อนข้างง่าย ลองด้วยตัวเอง เปลี่ยนสไตล์และสิ่งอื่น ๆ การเรียนรู้ bootstrap นั้นง่ายต่อการเรียนรู้จากเว็บไซต์ทางการ มันค่อนข้างง่าย ถึงเวลาที่จะเริ่มเขียน JS ของเราในบทความถัดไป เกือบจะเป็นตัวควบคุมและบริการ
เราจะยังคงเพิ่มบทความที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!
บทความที่เกี่ยวข้อง:
AngularJS Bootstrap ติดตั้งเฟรมเวิร์กส่วนหน้า - ส่วนควบคุม JS
AngularJS Bootstrap ติดตั้งเฟรมเวิร์กส่วนหน้า - หน้าพื้นฐาน
AngularJS Bootstrap มาพร้อมกับกรอบส่วนหน้า - งานเตรียมการ
AngularJS Bootstrap คำอธิบายโดยละเอียดและรหัสตัวอย่าง