Use BootstrapJS and AngularJS in combination, and why not use jQuery or bootstrapjsjquery

Use BootstrapJS and AngularJS in combination, and why not use jQuery or bootstrapjsjquery
Link: http://ourjs.com/detail/54e18c51232227083e000034
Bootstrap and Angular are widely used tools. In many projects, they need to be used together. Why not? They have changed the CSS and JS development methods, making the front-end an incredible tool. However, there are still some problems when you put them together, especially when you try to introduce the Bootstrap JavaScript component in Angular projects. When an Angular project is created, # You should not add the complete jQuery library ##. JQlite is already included in Angular and has all necessary functions of jQuery. This is because adding jQuery to Angular makes it difficult for you to fully master Angular's core advantages and the power of data binding. For example, if you want to change the View to some extent, a good practice is to change the View through the data bound by Angular. The goal of this article is to learn how to use jQuery and Angular to achieve the same goal through different means.
The question of Bootstrap JavaScript and Angular can be traced back to the fact that you should not use jQuery principles in your Angular project. The jQuery operation view method conflicts with the Angular Method for manipulating data. Why shouldn't you use jQuery? You can use jQuery to capture and inject data to DOM based on events. When we use the Bootstrap JavaScript component, for example, a button, we need to "set this button to active when you click this button ". Add the setting to the new button. Add the. active class and check the input (If your button is an input) for implementation. In Angular, data is not manipulated by capturing and injecting data. Generally, data binding is used to capture and inject data. It can also change the status of each component, but problems are exposed during the switchover. This is why we cannot directly use the JavaScript of Bootstrap. It depends on jQuery. We do not want jQuery to destroy our Angular project. If we try to bind a variable to a component, it cannot work. Solution: How can I solve the problem of UI Bootstrap? We learned from Angular that we need to bind data to a specific component and we should establish a direve ve command. This will make our Angular website focus more on data changes. This solution is a project called UI Bootstrap. This was developed by the Angular UI team and added many Angular extension components. UI Bootstrap does not use jQuery; it adds a built-in Directive (directives) for each Bootstrap JS component ). The requirements for UI Bootstrap (non-BootstrapJS) are:

• No jQuery dependency
• Dependency on Angular
• Dependent on the Bootstrap CSS file

That's it. Now, how do we integrate it into our project? Our Angular application allows us to see what settings we need. If you have read JavaScript code, you will see that we have created an Angular module and controller. Then, we create buttons and collapsed variables. Therefore, the next step is to get the UI Bootstrap file and put it in our project. Then we can import ui. bootstrap in our Angular module. In this way, we can obtain the commands that need to imitate the BootstrapJS component (directives )! The correct method is to adjust the values of these variables when you press the button. Use the UI Bootstrap button command (Directive) to use the UI Bootstrap document. The correct way to use the check box button is to add the ng-model definition object and add the btn-checkbox attribute. Below is the code for our button: Now, when we click the button, we can see the changes to this model, as we hope. Using the UI Bootstrap folding command for folding, we will open and close the panel based on the isCollapsed variable value. Therefore, ng-click = "isCollapsed =! IsCollapsed ". This will trigger our isCollapsed variable to switch the panel. Now, we can work on both components! In beautiful Angular, set a variable and watch it affect some views. Online example: http://codepen.io/sevilayha/pen/ExKGs