Programing

Twitter 부트 스트랩과 Angular.js의 실제 (또는 숨겨진) 차이점

lottogame 2021. 1. 11. 07:29
반응형

Twitter 부트 스트랩과 Angular.js의 실제 (또는 숨겨진) 차이점


나는 방금이 두 개의 프런트 엔드 프레임 워크를 비교해 왔고 내가 말할 수있는 바에 따르면, 개발자에게 HTML, CSS 및 JS 프런트 엔드를 제공하는 측면에서 똑같은 일을하는 것 같습니다.

Boostrap : 빠르고 쉬운 웹 개발을위한 세련되고 직관적이며 강력한 프런트 엔드 프레임 워크입니다. (GitHub에 별표 53,000 개 이상)

Angular.js : AngularJS는 동적 웹 앱을위한 구조적 프레임 워크입니다. (GitHub에 12,000 개 별표 표시됨)

평점은 아무 의미가 없지만 제가 조사하지 않은 '빠른'질문이 아님을 보여주기 위해 거기에 넣을 것이라고 생각했습니다.

위키피디아를 통해 Angular에 대해 이해 한 바에 따르면, 데이터베이스가있는 곳, 웹 서버가있는 곳, 비즈니스 로직이 발생하는 곳인 백엔드에서 프런트 엔드 디자인 / 레이아웃 / ui를 완전히 분리하는 것을 목표로합니다.

내가 부트 스트랩 (JS와 함께)에 대해 이해하는 것에서 정확히 똑같은 것을 얻을 수 있습니다.

각도 사이트는 다음을 언급합니다.

다른 프레임 워크는 HTML, CSS 및 / 또는 JavaScript를 추상화하거나 DOM 조작을위한 명령 적 방법을 제공하여 HTML의 단점을 처리합니다. 이들 중 어느 것도 HTML이 동적보기 용으로 설계되지 않은 근본적인 문제를 해결하지 못합니다.

이제는 그들이 백본이나 부트 스트랩 같은 곳에서 포샷을 찍고 있는지 확실하지 않지만 (쉽게 기분이 상하면 포샷 주석을 무시하십시오), 나에게는 무엇이 진짜인지 사실인지 알 수 없습니다. 2 사이에는 차이점이 있습니다.

아마도 DOM에 대한 고급 정보가 있거나 JS 또는 HTML의 다른 분 / 작은 측면이 2 개를 다르게 만들 수 있지만, 나는 그것을 보지 못합니다.

추신. 이와 같은 SOF 질문이 존재하지 않으며 블로그에서도 이에 대해 언급하지 않습니다 (매우 낮은 순위에 있거나 잘못된 방법을 요구하지 않는 한).

또한 일부 사람들이 부트 스트랩의 측면을 각도로 이식하는 작업을하고 있음을 발견했습니다.

편집 : 그것에 대해 생각하면서 부트 스트랩이 다른 화면보기에 대한 크기 조정 옵션을 제공한다는 것을 깨달았습니다. 각이 있는지 확실하지 않습니다. 그렇지 않다면 그게 유일한 차이점입니까?


Bootstrap은 쉽고 아름다운 구성 요소와 반응 형 디자인을 구축하기위한 디자인 프레임 워크입니다. 또한 HTML 디자인 규칙에 익숙하지 않은 백엔드 개발자의 눈에 띄는 개발자의 삶을 더 쉽게 만들어주는 기본 js 구성 요소가 있습니다.

따라서 CSS를 넣고 예제를 확인한 다음 프로젝트에 복제하십시오. 이것이 Bootstrap의 주요 흐름입니다.

Angular는 복잡한 웹 앱을 빌드하기위한 JS 프레임 워크입니다. Backbone, Ember Js와 일치합니다.

Submit에서 ajax 호출을하려는 양식의 간단한 예를 들어 보겠습니다. 이제 Bootstrap CSS를 사용하여 양식을 아름답게 만들 수 있지만 자바 스크립트 또는이 경우 angular를 사용하여 ajax 호출을 수행하고 필요한 기능을 수행해야합니다.

이들은 웹 앱에서 함께 이동하며 경쟁자가 아닙니다.


BootstrapAngularJS 는 매우 다른 두 가지 프레임 워크입니다.

SO 태그 정보에서

트위터 부트 스트랩

Bootstrap은 웹앱 및 사이트 개발을 시작하도록 설계된 Twitter의 프런트 엔드 프레임 워크입니다. 무엇보다도 여기에는 타이포그래피, 아이콘, 양식, 버튼, 테이블, 레이아웃 그리드, 탐색을위한 기본 CSS 및 HTML이 포함되어 있으며 사용자 정의 빌드 된 jQuery 플러그인과 반응 형 레이아웃 지원이 포함됩니다.

AngularJS

AngularJS는 CRUD 중심의 AJAX 스타일 웹 애플리케이션을 구축하기위한 오픈 소스 JavaScript 프레임 워크입니다. 그 목표는 동적 웹 앱을 빌드하는 데 유용한 지시문으로 HTML 어휘를 늘리기 위해 브라우저를 shim하는 것입니다.

Angular는 양방향 데이터 바인딩, DOM 제어 및 언 롤링, DOM 코드 숨김, 양식 유효성 검사 및 딥 링크를 추가하는 지시문과 함께 제공됩니다.

내가 부트 스트랩 (JS와 함께)에 대해 이해하는 것에서 정확히 똑같은 것을 얻을 수 있습니다.

부트 스트랩으로는 같은 것을 얻을 수 없습니다. AngularJS는 양방향 데이터 바인딩, 딥 링킹, 라우팅, 전환 애니메이션 등과 같은 기능을 제공합니다. 부트 스트랩은 사용자 정의 jquery 기반 플러그인, 멋진 모양과 느낌, 미디어 쿼리를위한 CSS 클래스 등을 제공합니다. angular는 다른 라이브러리와 함께 사용할 수 있기 때문에 함께 훌륭합니다.


Angular & Bootstrap 우선 Angular와 Bootstrap은 대안이 아니라 보완 적입니다. 그것은 하나가 다른 것으로 대체되지는 않지만 함께 결합되어 서로를 보완 할 수 있음을 의미합니다. 즉, 웹 애플리케이션의 다양한 측면을 처리합니다. 따라서 그들은 어떤 의미에서도 비교할 수 없습니다. 그러나 그 차이와 유사성은 다음 글 머리 기호로 설명 할 수 있습니다.

Angular는 무엇입니까?

  • Google에서 개발 및 유지 관리
  • 포괄적 인 클라이언트 측 (친구 측) JavaScript 프레임 워크
  • 야심 찬 JavaScript 단일 페이지 응용 프로그램을 위해 만들어졌습니다.
  • 앱을 구조화하고 프로젝트를 구성하기위한 구성 요소 세트를 제공합니다.
  • 모듈, 지시문, 데이터 바인딩의 형태로 멋지게 포장 된 프런트 엔드를위한 로직 레이어

Angular가 아닌 것은 무엇입니까?

  • not to provide CSS styles, grid classes or JavaScript components (like Modal, Tabs, Navigation Bar, Dropdown menu)

What is Bootstrap?

  • developed by Twitter and now open-sourced
  • a set of well-structured CSS styles, Grid classes and JavaScript components help with animations, creating nice looking widgets (have to write on your own otherwise)
  • handy to build Responsive design well suited for small projects without much customization and development efforts

What is Bootstrap not?

  • not to provide structure to application
  • not to provide common functionality (like routing, controllers and models, MV* architecture)

In Common (Angular & Bootstrap)

  • friend-end frameworks
  • immense open source support
  • come with a set of pre-defined components to fasten/ease the development

In Contrast (Angular Vs Bootstrap)

  • JS (structural) framework vs CSS (theming) framework
  • handles Logic vs deals with Style
  • robust framework vs small-scaled framework
  • for Single-Page Applications vs for any structure

Great answer @tony Puthenveettil To add (and taking it at 5000 feet level). Lets assume your website as your own , physical departmental store. The design of your departmental store will have to major areas:

  1. How you would like to compartment-a-lize your store into various sections like : a. milk and breakfast b. chips and choclates c. cererls and whole foods d. meat and chicken

  2. How do you create the layout of each section

While some of you may think that why do we need to compartment-ing your store. But eventually, its very important. Because it would lot easier to manage and maintain your stuff.

Just imagine your store has no order and different items are placed in different areas

e.g. you are finding meat fridge next to chocolates. odd eh ? Difficult to manage and maintain. yes !

So we need to compartment-ization of your various sections.

Now lets jump to how each section looks like . You may want to put different messaging and different look for organising chocolates compared to meat. While your meat section may big refrigerators, your chocolates section may have open trays !

So your compartment creation and maintainance is what Angular helps in. A fridge or an open tray, is what bootstrap is!

ReferenceURL : https://stackoverflow.com/questions/17779787/the-real-or-hidden-difference-s-between-twitter-bootstrap-and-angular-js

반응형