การวิเคราะห์สั้น ๆ ของโมดูล UI-Router และ NG-GRID ใน AngularJS

ฉันเบื่อที่บ้านและฉันก็หาบทแนะนำเกี่ยวกับ Angular Online ฉันเรียนรู้โมดูลทั้งสองของ Angular, UI-Router และ Ng-Grid และเลียนแบบมันและทำสิ่งเล็ก ๆ น้อย ๆ

รหัสได้รับการอัปโหลดไปยัง GitHub และที่อยู่อยู่ที่นี่ https://github.com/wwervin72/angular

เพื่อนที่สนใจสามารถดูได้ จากนั้นที่นี่ก่อนอื่นเราเข้าใจการใช้โมดูลทั้งสองนี้

ก่อนอื่นมาพูดคุยเกี่ยวกับโมดูล UI-Router ซึ่งส่วนใหญ่ใช้เพื่อใช้การกำหนดเส้นทางระดับลึก ในความเป็นจริง Angular มีคำแนะนำในตัว NG-Route ในตัว หากไม่มีปัญหาการทำรังในโครงการมันค่อนข้างสะดวกที่จะใช้คำสั่งนี้เพื่อให้ได้การกระโดดระหว่างหน้าเว็บ แต่ข้อบกพร่องของมันคือมันไม่มีทางที่จะใช้เส้นทางซ้อนลึก ดังนั้นก่อนอื่นถ้าเราต้องการใช้โมดูลนี้เราต้องดาวน์โหลด

ที่อยู่ดาวน์โหลดอยู่ที่นี่ http://www.bootcdn.cn/angular-ui-router/

หลังจากดาวน์โหลดเราสามารถนำเข้าสู่โครงการของเรา โปรดทราบว่าเนื่องจากโมดูลนี้ขึ้นอยู่กับ Angular เราจำเป็นต้องนำเข้าไฟล์ Angular JS ก่อนหน้านี้ สามารถดาวน์โหลดได้บนเว็บไซต์ทางการของ Angular

จากนั้นหลังจากการเตรียมการข้างต้นเสร็จสิ้นเราสามารถเขียนรหัสที่เขียนด้วยมือของเรา

ส่วน HTML

 <div> <div ui-view> </div> </div>

นี่คือสิ่งหนึ่งที่ควรทราบว่าแอตทริบิวต์ที่เพิ่มเข้ามาใน DIV นั้นไม่ได้เป็นมุมมอง NG อีกต่อไป แต่เป็นมุมมอง UI

ส่วน JS

 var app = angular.module ('app', ['ui.router', 'loginmodel', 'listmodel']); app.config (ฟังก์ชั่น ($ stateprovider, $ urlrouterprovider) {$ urlrouterprovider.otherwise ('/index'); 'tpls/start.html'}) .state ('ลงทะเบียน', {url: '/register', templateurl: 'tpls/register.html'}) .state ('main', {url: '/main {positiontype: [0,9] {1,5} }, 'typelist@main': {templateurl: 'tpls/typelist.html'}, 'tbhero@main': {templateurl: 'tpls/tbhero.html'}}}) .state ('ค้นหา', {url: '/findpwd', templateurl: 'tpls/findpwd.html'}) .state ('รายละเอียด', {url: '/รายละเอียด/: id', templateurl: 'tpls/detail.html'})

มีสามสถานที่ให้ความสนใจ:

1. เมื่อทำรังชั้นนอกสุดของฉันเป็นส่วนหลักและจากนั้นชิ้นส่วน typelist และ tbhero จะซ้อนอยู่ภายใน เราต้องให้ความสนใจกับวิธีการเขียนที่นี่

2. เมื่อเราต้องการเปิดเนื้อหาที่แตกต่างกันตามตัวเลือกเราต้องส่งพารามิเตอร์ไปยังหน้าถัดไป นี่คือส่วนรายละเอียดและเราต้องให้ความสำคัญกับวิธีการเขียนที่นี่

3. เมื่อเราใช้ Angular.Module เพื่อสร้างแอปพลิเคชันแอปเราจำเป็นต้องนำเข้าโมดูล UI.Router ในนั้นและโมดูลบางอย่างที่เราสร้างขึ้นเองก็ต้องนำเข้าที่นี่

4. เราใช้ $ stateprovider เพื่อกำหนดค่าเส้นทางไม่ใช่ $ RouteProvider และรัฐที่ใช้ที่นี่แทนที่จะเป็นเวลา

หลังจากกำหนดค่าการกำหนดเส้นทางส่วนที่เหลือคือการเขียนรหัสสำหรับแต่ละส่วนของ TPLs ฉันจะไม่แนะนำมันมากเกินไปที่นี่ สิ่งที่สำคัญที่สุดที่นี่คือการกำหนดค่าการกำหนดเส้นทาง

โอเคมาดูการใช้งานของ NG-GRID นี่คือที่อยู่ดาวน์โหลด http://www.bootcdn.cn/ng-grid/

ส่วน HTML

ส่วนหลัก

 <div> <div ui-view = "typelist"> </div> <div ui-view = "tbhero"> </div> </div>

ส่วนที่พิมพ์ดีด

 <div> <div> <div> <a href = "javascript: void (0);"> ประเภทการวางตำแหน่งฮีโร่ </a> <a ui-sref = "หลัก ({positionype: 0})"> การวางตำแหน่งทั้งหมด </a> <a ui-sref = "หลัก ui-sref = "main ({positiveType: 2})"> ช่องทางกลาง </a> <a ui-sref = "Main ({positiveType: 3})"> Lop Lane </a> <a ui-sref = "Main ({positiontype: 4}) ui-sref = "main ({positiontype: 5})"> Assist </a> </div> </div> </div>

ส่วน tbhero

 <div ng-controller = "listctrl"> <div> <div> <ปุ่ม ui-sref = "addhero ()"> เพิ่มฮีโร่ </button> <button ui-sref = "index ()"> ออก </button> </div> <div> <form> </div> </div> <div> <div> <div ng-grid = "gridoptions"> </div> </div> </div> </div> </div> </div>

ส่วน JS

 var listModel = Angular.Module ('ListModel', ['nggrid']); listmodel.controller ('listctrl', ['$ scope', '$ http', 'state', '$ scope. [5,15,20], หน้า: 5, CurrentPage: 1}; SearchText.toLowerCase (); $ http.get ('data/hero.php? param ='+$ stateparams.positiontype) .success (ฟังก์ชั่น (data) {var data = data.filter (รายการ) {return json.stringify (รายการ) }); $ http.get ('data/hero.php? param ='+$ stateparams.positiontype) .success (ฟังก์ชั่น (data) {data.foreach (ฟังก์ชั่น (รายการ, i) {item.index = i+1;}); }). ข้อผิดพลาด (ฟังก์ชั่น (ข้อมูล) {การแจ้งเตือน ('การร้องขอข้อผิดพลาด ... ');})}}}, 100); $ scope.getDates ($ scope.pagingOptions.pagesize, $ scope.pagingoptions.currentpage); }, true); $ scope.gridoptions = {data: 'datas', // แหล่งข้อมูลที่แสดงในตาราง multiSelect: false, // เป็นไปได้หรือไม่ ColumnDefs: [{ฟิลด์: 'index', // นี่คือชื่อแอตทริบิวต์ในความกว้างของข้อมูล: 80, แสดง: 'หมายเลขลำดับ', // นี่คือชื่อของแต่ละคอลัมน์ในตาราง pinnable: จริง, เรียงลำดับ: จริง // เป็นไปได้ที่จะเรียงลำดับ}, {ฟิลด์: 'ชื่อ' 'นามแฝง', DisplayName: 'Alias', DisplayName: 'Alias', DisplayName: 'Alias', Width: 60, cortable: true, pinnable: true}, {field: 'position', displayname: 'position', width: 70, cortable: true, pinnable: true}, {field: }, {ฟิลด์: 'id', displayName: 'รายละเอียดกลยุทธ์', cortable: false, pinnable: true, celltemplate: '<div> <a ui-sref = "รายละเอียด ({id: row.getProperty (col.field)})" id = " // คุณสามารถเปลี่ยนหน้า Showfooter: จริง // คุณแสดงจุดสิ้นสุดของตาราง totalserverItems: 'totalserverItems', // จำนวนทั้งหมดของข้อมูล pagingoptions: $ scope.pagingoptions, // ตัวกรองส่วนหน้า: $ scope.filteroptions //

สิ่งที่สำคัญที่สุดที่นี่คือ $ scope.gridoptions ในเวลาเดียวกันเราต้องให้ความสำคัญกับวิธีการเขียนของพารามิเตอร์ในคู่มือรายละเอียดล่าสุด

นี่คือการเรนเดอร์บางส่วน:

นี่คือการเรนเดอร์บางส่วน:

นอกจากนี้ฉันจะไม่แนะนำเนื้อหาของการตรวจสอบรูปแบบเชิงมุมบริการตัวช่วยสร้าง PHP ฯลฯ ที่นี่ หากมีอะไรผิดปกติกับการเขียนฉันจะฝากข้อความไว้เพื่อแจ้งให้คุณทราบขอบคุณ ^_ ^

การวิเคราะห์สั้น ๆ ข้างต้นของโมดูล UI-Router และ NG-GRID ใน AngularJS คือเนื้อหาทั้งหมดที่ฉันได้แบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น