Làm sao tích hợp angular 5 vào codeigniter

Thuc_Nguyen_tan · June 13, 2018, 5:38am

Hi ACE, hiện nay mình cảm nhận (thiên hạ cảm nhận lâu rồi) cái angular x thì rất pro hơn so với angular js nhưng có cái ko biết cách tích hợp nó vào codeigniter, lay hoay mãi. Có cao nhân nào cho vài ý kiến, kinh nghiệm để tích hợp, ngàn lần cám ơn.!!!

ronin1184 · June 13, 2018, 6:21am

Cứ làm Angular dạng SPA, giao tiếp qua API và quên đi vụ tích hợp.

Thuc_Nguyen_tan · June 13, 2018, 6:46am

không có giải pháp cho vụ tích hợp hả bạn.!!!
Cám ơn bạn mình đã có giải pháp tích hợp, vậy có thể triển khai một codeigniter chứa nhiều SPA angular x,
Nhiều khi hỏi lại sinh ý tưởng, o là la.

ronin1184 · June 13, 2018, 6:50am

Ồ, nhiều SPA à? Vậy bạn hiểu SPA có nghĩa là gì?

ronin1184 · June 13, 2018, 7:30am

Trước khi dấn thân vào làm cái này cái kia và hỏi các câu hỏi tích hợp cái này cái kia.
Mình nghĩ bạn nên tìm hiểu bản chất của các công cụ / framework này.
Hiện tại thì website có 2 tầng là:
Backend và FrontEnd
Trong trường hợp của bạn thì backend dùng CI. Về cơ bản thì nó dùng để giao tiếp với DB, tính toán nếu cần thiết, trả về dữ liệu để render ra template. Template là thứ người dùng có thể thấy được, đó là HTML.
Bạn có thể nhúng bất kì js lib nào vào trang HTML được render từ backend bằng tag <script/> như kiểu này:

    <script src="path/to/js-file.js"></script>

Bạn có thể làm điều này với jquery hay react, vue hay bất kì js lib nào không cần transpile hoặc đã transpile ra JS mà trình duyệt có thể hiểu.
Trong trường hợp Angular 2+ thì là vấn đề khác, nó dùng TypeScript hoặc ES6+
Trình duyệt không hiểu TypeScript mà phải thông qua chương trình TypeScript để transpile từ TypeScript qua JS. ES6+ chưa được hỗ trợ rộng rãi trên tất cả các trình duyệt nên nó cần Babel để transpile về ES5. Từ đó mới có thể sử dụng được.
Do đặc tính đó nên không thể nhúng trực tiếp code Angular 2+ vào HTML mà phải bunch nó ra JS trước rồi mới đưa vào tag <script/> được.
Một khi đã bunch ra được ra các file html/js cuối cùng thì việc bạn dùng nó độc lập như 1 SPA hay đưa nó vào 1 trang được server render ra hay TÍCH HỢP thì tuỳ bạn.

Thuc_Nguyen_tan · June 13, 2018, 9:10am

Có nghĩa là một web site có nhiều single page application.

kisuluoibieng · June 13, 2018, 1:18pm

mấy nay thấy post nhiều câu hỏi hơi bị ngố về angular nên mình có góp ý thế này
bạn hãy xem lại mục đích bạn sử dụng angular.
Vì nó pro? pro ở điểm nào, cách bạn sử dụng nó có lợi ích gì so với jquery?

Thuc_Nguyen_tan · June 14, 2018, 12:46am

Mỗi lần chạy lệnh ng build --prod, các tên file css, js bị thay đổi, bạn có cách nào cố định nó lại không?

ronin1184 · June 14, 2018, 12:59am

Tại sao các file đó cần phải cố định?

Thuc_Nguyen_tan · June 14, 2018, 5:08am

Trong codeigniter mình tạo app angular 5 ở thư mục root, code, and deploy ng build --prod, mình đưa code trong file dist/index.html vào views trong views của code igniter.
đại khái như thế này

 this is test view app angular
<br>
<?php echo base_url()."app-ang/dist/app-ang/"; ?>
<br>
<link rel="stylesheet" href="<?php echo base_url()." app-ang/dist/app-ang/ " ?>styles.34c57ab7888ec1573f9c.css">
<app-root></app-root>
<script type="text/javascript" src="<?php echo base_url()."app-ang/dist/app-ang/" ?>runtime.a66f828dca56eeb90e02.js"></script>
<script type="text/javascript" src="<?php echo base_url()."app-ang/dist/app-ang/" ?>polyfills.2f4a59095805af02bd79.js"></script>
<script type="text/javascript" src="<?php echo base_url()."app-ang/dist/app-ang/" ?>main.e154634923c907803e1b.js"></script>

Tuy nhiên sau khi ng build --prod again, nó đổi tên mất, tốn công dán lại quá.

hay phải build runtime ta!!!

ronin1184 · June 14, 2018, 6:04am

Nhìn cách làm này thì mình thấy rằng bạn không hề hiểu ý nghĩa của code runtime trong môi trường dev và code production có thể nhúng vào web hoặc chạy độc lập.
Vậy giờ mình gợi ý bạn 1 stack dạng này:
Angular là 1 SPA, nó sẽ giao tiếp với CI qua API/HTTP request.
Khi đó, trong môi trường local (dev) bạn sẽ có 2 dự án độc lập, 1 là Angular và 1 là CI
Angular sẽ chạy ở UR: http://localdomain.dev:8000
CI chỉ dùng làm API và sẽ chạy ở URL http://localdomain.dev/api
Ví dụ như:
http://localdomain.dev/api/user [GET]
http://localdomain.dev/api/user [POST, PUT]
http://localdomain.dev/api/user/:id [GET, DELETE]
Để khắc phục vấn đề CORS (không hiện error response) thì cần dùng Nginx proxy cho cái client về URL:
http://localdomain.dev
Từ đó tầng client do Angular quản lý hết
Tầng API cung cấp dữ liệu cho client do CI quản lý hết.

Thuc_Nguyen_tan · June 15, 2018, 10:02am

Angular 5 thật tuyệt vời

Good ferformance( Cần cái module nào thì import vào).
Security ( Nén luôn cái file js luôn - Code không đẹp thì không ai biết).
Good integrated to codeigniter, mỗi ctrl views là một cái angular app luôn (Đếch cần thêm cái laravel làm chi cho khổ, sao cứ phải theo thiên hạ.)
Cập nhật kiến thức từ angular js lên angular x là cực kỳ thuận tiện và dễ dàng.
Code theo phong cách hiện đại, (nào là generate code)

https://plnkr.co/edit/MRGHXs?p=preview

Còn đây là đoạn code đẩy angular x trong Codeigniter

public function test($cmd="ds"){
	switch($cmd){
		case "test":
			$ans=array("code"=>"ok","msg"=>"Hello world from server");
			echo json_encode($ans);
			break;
		case "ds":

			//ng build --prod --base-href /ci_tool_kiem_com2018/app-ang/dist/app-ang/
			//G:\wamp64\www\ci_tool_kiem_com2018\app-ang\dist\app-ang

			$file="./app-ang/dist/app-ang/index.html";
			$nd=file_get_contents($file);
			$this->data['nd']=$nd;

			$url=site_url()."/".$this->get_cls()."/".$this->get_fn();
			$this->data["url"]=$url;
			$page_view="test";
			$this->data["func"]=$page_view;
			$this->data['page']=$this->load->view($this->get_cls()."/".$page_view,$this->data,true);
			$this->load->view('index_view',$this->data,false);
			break;
	}
}

và views

<?php echo $nd; ?>

cực kỳ đơn giản phải không nào!!!

kisuluoibieng · June 15, 2018, 1:27pm

Good ferformance( Cần cái module nào thì import vào).
Security ( Nén luôn cái file js luôn - Code không đẹp thì không ai biết).
Good integrated to codeigniter, mỗi ctrl views là một cái angular app luôn (Đếch cần thêm cái laravel làm chi cho khổ, sao cứ phải theo thiên hạ.)
Cập nhật kiến thức từ angular js lên angular x là cực kỳ thuận tiện và dễ dàng.
Code theo phong cách hiện đại, (nào là generate code)

Làm 1 bài so sánh đơn giản

Performance so với jquery thì như thế nào, bạn thấy được chuyện đó chưa?
so với html/css/js/jquery hay html + css+ pure javascript thì có gì hơn? Các combo này có import gì đâu nhỉ?
Mục đích viết web bằng angular chỉ để giấu code xấu? hay nén js?
nếu là che giấu sự kém cõi về kĩ năng code của mình thì chuyện này không đúng với mục đích của angular cho lắm
nếu là nén js thì google gõ “js minify”, “js compress” … hoặc không giỏi tiếng anh thì gõ “cách nén file js”, thậm chí là có nén html, css nữa
Laravel thì liên quan gì tới CI? Nói kiểu đó thì bỏ thư mục dist của angular build ra vô htdocs là chạy vô tư rồi, cần CI làm gì?
Bạn cập nhật kiến thức từ angular js lên angular như thế nào mà gọi là dễ dàng (ý là bạn trải nghiệm cái này chưa, cảm thấy thế nào? hay chỉ nghe theo mô tả của người khác)
generate code thì chỉ là init các component, route, service …thì có gì gọi là phong cách hiện đại, chỉ generate code khởi tạo cái này cái nọ thôi đã là phong cách hiện đại rồi sao?

GIờ thì lời khuyên không còn là “bạn hãy xem lại mục đích bạn sử dụng angular.” như comment ở trên nữa, mà là bạn nên coi lại kiến thức về web của mình
không chỉ đơn thuần là biết php, html/css/js, vài library js là hiểu về ứng dụng web, đặc biệt là các ứng dụng web bây giờ chia ra font end, back end rất rõ ràng, thậm chí là nhiều back end từ nhiều serve nữa là khác
hoặc ít nhất là cũng nên coi cách người ta dev angular như thế nào

ronin1184 · June 15, 2018, 2:46pm

Angular 1 lên Angular 2+ cực kì thuận tiện?
Nếu vậy hoặc bạn là 1 thiên tài bẩm sinh hoặc là chẳng hiểu gì và đang lảm nhảm.

Thuc_Nguyen_tan · June 16, 2018, 1:22am

Lúc trước mình cũng nghĩ thế, nhưng nay bắt đầu có sự cảm nhận về tương đồng;
À có cái là sao khi buid angular trong vsc nó hay bị window scrash nhỉ? bạn có bị thế không?
Khi code thì nó tự động compile nhưng có điều thoát ra build lại thì hay bị window scrash!!!

Thuc_Nguyen_tan · June 16, 2018, 1:20am

jQuery thì hay, nhưng viết những cái phức tạp mình không viết nổi

daynhauhoc cũng giấu code nè, “họ viết dở quá”

<link rel='preload' href='/assets/locales/en-820a1ae7539bc45219e409c3314b3c2ce91c61e0ed0088405ca93b9c9321ee18.js' as='script'/>
<script src='/assets/locales/en-820a1ae7539bc45219e409c3314b3c2ce91c61e0ed0088405ca93b9c9321ee18.js'></script>
    <link rel='preload' href='/assets/ember_jquery-b018f0ade967f79b21dc04fb709bf3ce41b791c8047282d68784382bbd80ba38.js' as='script'/>
<script src='/assets/ember_jquery-b018f0ade967f79b21dc04fb709bf3ce41b791c8047282d68784382bbd80ba38.js'></script>
    <link rel='preload' href='/assets/preload-store-af602b020bef099c06be759bb10b1de24b85b8eb2e398ce93c129d2b2c887b82.js' as='script'/>
<script src='/assets/preload-store-af602b020bef099c06be759bb10b1de24b85b8eb2e398ce93c129d2b2c887b82.js'></script>
    <link rel='preload' href='/assets/vendor-199fce5a9e9895329b51b04605f1f5061951acb488baa6b2ea2fc2ae36def529.js' as='script'/>
<script src='/assets/vendor-199fce5a9e9895329b51b04605f1f5061951acb488baa6b2ea2fc2ae36def529.js'></script>
    <link rel='preload' href='/assets/pretty-text-bundle-f6b0056040ab06a7554e97e5e4f119988c5ee44509e2b450c93b6abb76797d46.js' as='script'/>
<script src='/assets/pretty-text-bundle-f6b0056040ab06a7554e97e5e4f119988c5ee44509e2b450c93b6abb76797d46.js'></script>
    <link rel='preload' href='/assets/application-ccac595c4295b4c7a36d6a7dcaf1b1d94ed6cb78f42bb411af6d8f06fb65f3e8.js' as='script'/>
<script src='/assets/application-ccac595c4295b4c7a36d6a7dcaf1b1d94ed6cb78f42bb411af6d8f06fb65f3e8.js'></script>
    <link rel='preload' href='/assets/plugin-0cfad26c813a133b29db3421313ae2a3a2cb2bda4013b9ee092931ce1360ecf4.js' as='script'/>
<script src='/assets/plugin-0cfad26c813a133b29db3421313ae2a3a2cb2bda4013b9ee092931ce1360ecf4.js'></script>
    <link rel='preload' href='/assets/plugin-third-party-0d3cc4caa9b11004fe0b7e196ad6630930fce60d6c05c6d462587223ccc7ac85.js' as='script'/>
<script src='/assets/plugin-third-party-0d3cc4caa9b11004fe0b7e196ad6630930fce60d6c05c6d462587223ccc7ac85.js'>