การใช้ NG หมายถึงการใช้แอปพลิเคชันหน้าง่าย ๆ และฉันหวังว่าทุกหน้าในไซต์จะใช้เส้นทาง NG และพยายามอย่าใช้ location.href อย่างไรก็ตาม WebApps ดังกล่าวมีประโยชน์มากมาย แต่ข้อเสียเพียงอย่างเดียวคือ WebApp ของคุณมีผู้ใช้มากขึ้นและฟังก์ชั่นมากขึ้นและตัวควบคุมมากขึ้นก็มีมากขึ้นเรื่อย ๆ คุณต้องโหลดคอนโทรลเลอร์ทั้งหมดเป็นโมดูลทั่วโลกเพื่อให้หลังจากกด F5 เพื่อรีเฟรชในหน้าใด ๆ ในเว็บไซต์คุณสามารถกำหนดเส้นทางไปยังหน้าอื่น ๆ โดยไม่มีข้อผิดพลาดที่จะไม่ค้นหาคอนโทรลเลอร์ การโหลดคอนโทรลเลอร์ทั้งหมดทำให้ความเร็วในการเปิดแรกของหน้าช้าลงบนโทรศัพท์มือถือ วันนี้ฉันจะแบ่งปันวิธีที่ฉันปรับปรุงข้อเสียนี้และตระหนักถึงการโหลดแบบแยกส่วนของคอนโทรลเลอร์
app.js
การคัดลอกรหัสมีดังนี้:
app.config (ฟังก์ชั่น ($ controllerprovider, $ compileProvider, $ filterprovider, $ prost) {
app.register = {
คอนโทรลเลอร์: $ ControllerProvider.Register
คำสั่ง: $ compileProvider.directive,
ตัวกรอง: $ filterprovider.register
โรงงาน: $ PRESTIVE.FACTORY,
บริการ: $ PRISTIVE.Service
-
-
บล็อก JS ที่ต้องการเมื่อเส้นทางและดำเนินการต่อหลังจากโหลดสำเร็จ หากคุณไม่ทราบว่าสคริปต์ $ คือคลิก http://dustindiaz.com/scriptjs
การคัดลอกรหัสมีดังนี้:
$ routeprovider.when ('/: ปลั๊กอิน', {
templateurl: ฟังก์ชั่น (RD) {
กลับ 'ปลั๊กอิน/' + rd.plugin + '/index.html';
-
แก้ไข: {
โหลด: ฟังก์ชั่น ($ q, $ route, $ rootscope) {
var referred = $ q.defer ();
VAR Dependencies = [
'plugin/' + $ route.current.params.plugin + '/controller.js'
-
$ script (การพึ่งพา, function () {
$ rootscope. $ apple (function () {
deferred.resolve ();
-
-
return reterred.promise;
-
-
-
controller.js
การคัดลอกรหัสมีดังนี้:
app.register.controller ('mypluginctrl', ฟังก์ชั่น ($ scope) {
-
-
index.html
การคัดลอกรหัสมีดังนี้:
<div ng-controller = "MyPluginctrl">
-
</div>
ด้วยวิธีนี้การแปลงสามารถโหลด JS แบบไดนามิกที่เส้นทางขึ้นอยู่กับเมื่อเส้นทางถูกกำหนดเส้นทาง อย่างไรก็ตามโดยทั่วไปมีหลายเส้นทางใน WebApps ของเราและแต่ละเส้นทางจะต้องเขียนโค้ดจำนวนมากซึ่งทั้งน่าเกลียดและยากต่อการบำรุงรักษา เราอาจปรับให้เหมาะสม
app.js
การคัดลอกรหัสมีดังนี้:
app.config (ฟังก์ชั่น ($ controllerprovider, $ compileProvider, $ filterprovider, $ prost) {
app.register = {
คอนโทรลเลอร์: $ ControllerProvider.Register
คำสั่ง: $ compileProvider.directive,
ตัวกรอง: $ filterprovider.register
โรงงาน: $ PRESTIVE.FACTORY,
บริการ: $ PRISTIVE.Service
-
app.asyncjs = function (js) {
return ["$ q", "$ route", "$ rootscope", ฟังก์ชั่น ($ q, $ route, $ rootscope) {
var referred = $ q.defer ();
VAR Dependencies = JS;
if (array.isarray (การพึ่งพา)) {
สำหรับ (var i = 0; i <adpendencies.length; i ++) {
การพึ่งพา [i] + = "? v =" + v;
-
} อื่น {
การพึ่งพา + = "? v =" + v; // v เป็นหมายเลขเวอร์ชัน
-
$ script (การพึ่งพา, function () {
$ rootscope. $ apple (function () {
deferred.resolve ();
-
-
return reterred.promise;
-
-
-
การคัดลอกรหัสมีดังนี้:
$ routeprovider.when ('/: ปลั๊กอิน', {
templateurl: ฟังก์ชั่น (RD) {
กลับ 'ปลั๊กอิน/' + rd.plugin + '/index.html';
-
แก้ไข: {
โหลด: app.asyncjs ('plugin/controller.js')
-
-
ณ จุดนี้เพียงแยกคอนโทรลเลอร์ดั้งเดิม js ออกเป็น js หลายตัวตามโมดูลแล้วเพิ่มการพึ่งพาโมดูลเพื่อกำหนดเส้นทางเพื่อปรับปรุงความเร็วในการโหลด วิธีนี้ไม่เพียง แต่สามารถใช้สำหรับการโหลดคอนโทรลเลอร์ตามความต้องการ แต่ยังสำหรับโมดูล JS อื่น ๆ เช่น jQuery.ui.datepicker.js เพิ่มโหนดเส้นทางที่ต้องเลือก
การคัดลอกรหัสมีดังนี้:
$ routeprovider.when ('/: ปลั๊กอิน', {
templateurl: ฟังก์ชั่น (RD) {
กลับ 'ปลั๊กอิน/' + rd.plugin + '/index.html';
-
แก้ไข: {
โหลด: app.asyncjs (['plugin/controller.js', 'plugin/jQuery.ui.datepicker.js']))))))))))))))))))
-
-
ไม่เป็นไร
PS: $ สคริปต์สามารถตัดสิน JS ที่ต้องโหลดได้ หากมีการโหลดมาก่อนมันจะกลับสู่ความสำเร็จโดยตรง กล่าวคือเฉพาะเมื่อคุณป้อนอินเทอร์เฟซการเลือกวันที่เป็นครั้งแรกคุณจะขอ jQuery.ui.datepicker.js เพื่อออกจากนั้นป้อนและคุณจะไม่ขอ