AngularJS 配哪个 CSS 框架好？SemanticUI，Bootstrap，还是其他

Posted 2023-03-19

Bootstrap 和 Angular 都是人们大量使用的工具。在很多项目中，它们需要一起使用。为什么不呢？他们已经改变了CSS和JS的开发方式，让前端既成为令人难以置信的工具。

但是，把它们放在一起使用还有一些问题，特别是当你试图在Angular的项目中引入Bootstrap javascript组件时，会是一个问题。当建立了Angular的项目，##你不应该添加完整的jQuery库##。 jQlite已经包含在Angular中的，所有jQuery必要的功能它都有。这是因为把jQuery添加到Angular的项目将很难让你完全掌握Angular的核心优势和数据绑定的力量。

比如你想在某种程度上改变View视图，一个很好的做法是通过Angular所绑定的data数据来改变。我们写这篇文章的目标就是为了，学习用jQuery和Angular通过不同的手段达到相同的目的。

Bootstrap JavaScript和Angular问题

这个问题可以追溯到，你不应该在你的Angular项目中使用jQuery的原则。jQuery操作视图的方法与Angular操纵数据的方法会起冲突。

回到顶部
为什么你不应该使用jQuery

您使用jQuery操作数据抓住并注入到DOM的方式基本上基于事件。当我们使用Bootstrap JavaScript组件时，比如一个按钮，我们需要“单击此按钮时，设置此按钮为激活状态”。并将这种设置添加入新加的按钮中。通过添加 .active 类和检查input（如果你的按钮是一个input）为实现。

在Angular中，操纵数据不是通过抓取和注入。一般通过数据绑定来实现，野蛮抓取注入数据。也能够改变每个组件的状态，不过在切换时就会暴露出问题。

这就是为什么我们不能直接用Bootstrap的JavaScript。它依赖于jQuery我们不希望jQuery的破坏我们的Angular项目。如果我们试图绑定变量到组件，它无法工作。

回到顶部
解决方案： UI Bootstrap

那么该如何解决？我们从Angular得知，我们需要将数据绑定到一个特定的组件，我们应该建立一个directive 指令。这将让我们的Angular网站，更关注数据的变化。

该解决方案是一种被称为UI Bootstrap 的项目。这是由Angular UI团队开发的，增加了许多Angular的扩展组件。UI Bootstrap不使用jQuery; 它为每个Bootstrap JS组件添加了内置指令（directives）。

对于UI Bootstrap（非BootstrapJS）的要求是：

没有jQuery的依赖
依赖Angular
依赖Bootstrap CSS文件

就是这样。现在，我们要如何将它集成到我们的项目？

回到顶部
我们的Angular应用

让我们来看看我们需要些什么设置。如果你已经看过JavaScript代码，你会看到我们创建了一个Angular模块和控制器。然后，我们创建的按钮和折叠的变量。

为此，下一步就是要拿到UI Bootstrap的文件，放到我们的项目中。那么我们能够在我们的Angular模块中导入ui.bootstrap。就这样，我们就能够获取需要模仿BootstrapJS组件的指令（directives ）！

// 创建 angular app 导入 ui.bootstrap

angular.module('app', ['ui.bootstrap'])

.controller('mainController', function($scope)

// BUTTONS ======================

// 设置数据

$scope.bigData = ;

$scope.bigData.breakfast = false;

$scope.bigData.lunch = false;

$scope.bigData.dinner = false;

// COLLAPSE =====================

$scope.isCollapsed = false;

);

现在，正确的使用方式是，当按下按钮时调整这些变量的值。

回到顶部
使用UI Bootstrap按钮指令(Directive)

通过UI Bootstrap文档 ，使用复选框按钮正确的方法是添加 ng-model 的定义对象，并添加 btn-checkbox 属性。下面是我们按钮的代码：

<div class="btn-group" data-toggle="buttons">

<label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox>

Breakfast

</label>

<label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox>

Lunch

</label>

<label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox>

Dinner

</label>

</div>

现在，当我们点击按钮时，我们可以看到该模型的变化，就像我们希望的那样。

回到顶部
使用UI Bootstrap折叠指令

对于折叠，我们将基于isCollapsed变量的值打开和关闭面板。因此，我们将使用 ng-click="isCollapsed=!isCollapsed"。这将触发我们的isCollapsed变量从而切换面板。

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">

<a href="#" ng-click="isCollapsed = !isCollapsed">

Collapsible Group Item #1

</a>

</h4>

</div>

<div collapse="isCollapsed">

<div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

</div>

</div>

</div>

现在，我们两个组件都可以工作了！在美丽时尚的Angular中，设置一个变量，看着它影响一些视图。 参考技术A Bootstrap 和 Angular 都是人们大量使用的工具。在很多项目中，它们需要一起使用。为什么不呢？他们已经改变了CSS和JS的开发方式，让前端既成为令人难以置信的工具。

但是，把它们放在一起使用还有一些问题，特别是当你试图在Angular的项目中引入Bootstrap JavaScript组件时，会是一个问题。当建立了Angular的项目，##你不应该添加完整的jQuery库##。 jQlite已经包含在Angular中的，所有jQuery必要的功能它都有。这是因为把jQuery添加到Angular的项目将很难让你完全掌握Angular的核心优势和数据绑定的力量。

比如你想在某种程度上改变View视图，一个很好的做法是通过Angular所绑定的data数据来改变。我们写这篇文章的目标就是为了，学习用jQuery和Angular通过不同的手段达到相同的目的。

Bootstrap JavaScript和Angular问题

这个问题可以追溯到，你不应该在你的Angular项目中使用jQuery的原则。jQuery操作视图的方法与Angular操纵数据的方法会起冲突。

回到顶部
为什么你不应该使用jQuery

您使用jQuery操作数据抓住并注入到DOM的方式基本上基于事件。当我们使用Bootstrap JavaScript组件时，比如一个按钮，我们需要“单击此按钮时，设置此按钮为激活状态”。并将这种设置添加入新加的按钮中。通过添加 .active 类和检查input（如果你的按钮是一个input）为实现。

在Angular中，操纵数据不是通过抓取和注入。一般通过数据绑定来实现，野蛮抓取注入数据。也能够改变每个组件的状态，不过在切换时就会暴露出问题。

这就是为什么我们不能直接用Bootstrap的JavaScript。它依赖于jQuery我们不希望jQuery的破坏我们的Angular项目。如果我们试图绑定变量到组件，它无法工作。

回到顶部
解决方案： UI Bootstrap

那么该如何解决？我们从Angular得知，我们需要将数据绑定到一个特定的组件，我们应该建立一个directive 指令。这将让我们的Angular网站，更关注数据的变化。

该解决方案是一种被称为UI Bootstrap 的项目。这是由Angular UI团队开发的，增加了许多Angular的扩展组件。UI Bootstrap不使用jQuery; 它为每个Bootstrap JS组件添加了内置指令（directives）。

对于UI Bootstrap（非BootstrapJS）的要求是：

没有jQuery的依赖
依赖Angular
依赖Bootstrap CSS文件

就是这样。现在，我们要如何将它集成到我们的项目？

回到顶部
我们的Angular应用

让我们来看看我们需要些什么设置。如果你已经看过JavaScript代码，你会看到我们创建了一个Angular模块和控制器。然后，我们创建的按钮和折叠的变量。

为此，下一步就是要拿到UI Bootstrap的文件，放到我们的项目中。那么我们能够在我们的Angular模块中导入ui.bootstrap。就这样，我们就能够获取需要模仿BootstrapJS组件的指令（directives ）！

// 创建 angular app 导入 ui.bootstrap

angular.module('app', ['ui.bootstrap'])

.controller('mainController', function($scope)

// BUTTONS ======================

// 设置数据

$scope.bigData = ;

$scope.bigData.breakfast = false;

$scope.bigData.lunch = false;

$scope.bigData.dinner = false;

// COLLAPSE =====================

$scope.isCollapsed = false;

);

现在，正确的使用方式是，当按下按钮时调整这些变量的值。

回到顶部
使用UI Bootstrap按钮指令(Directive)

通过UI Bootstrap文档 ，使用复选框按钮正确的方法是添加 ng-model 的定义对象，并添加 btn-checkbox 属性。下面是我们按钮的代码：

<div class="btn-group" data-toggle="buttons">

<label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox>

Breakfast

</label>

<label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox>

Lunch

</label>

<label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox>

Dinner

</label>

</div>

现在，当我们点击按钮时，我们可以看到该模型的变化，就像我们希望的那样。

回到顶部
使用UI Bootstrap折叠指令

对于折叠，我们将基于isCollapsed变量的值打开和关闭面板。因此，我们将使用 ng-click="isCollapsed=!isCollapsed"。这将触发我们的isCollapsed变量从而切换面板。

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">

<a href="#" ng-click="isCollapsed = !isCollapsed">

Collapsible Group Item #1

</a>

</h4>

</div>

<div collapse="isCollapsed">

<div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

</div>

</div>

</div>

哪个弹簧视图解析器与 angularjs 配合得很好？

【中文标题】哪个弹簧视图解析器与 angularjs 配合得很好？

【英文标题】：Which spring view resolver plays nice with angularjs?

【发布时间】：2014-09-10 08:50:49

【问题描述】：

我正在编写一个使用 angularjs 和 spring mvc 作为 REST 服务提供者和部分视图提供者的 web 应用程序（我也在使用 angular-ui-router 以便我可以有多个嵌套的部分）。我目前对模板语言没有任何用处，因为我打算用 Angular 做所有事情，但是我尝试过的每一个视图解析器都有某种类型的模板语言，它与 Angular 冲突，或者导致应用程序崩溃和/或填充我的日志有错误。

首先我尝试使用 InternalResourceViewResolver 但没有运气，因为它似乎只需要 .jsp 文件并且不会显示其他任何内容。

然后我尝试使用 Thymeleaf。 Thymeleaf 遵循 XML 标准，这迫使我重写我的大部分 html 以遵循 xml 要求，并且在我完成之后，它在 ng-show 指令中遇到 && 时死亡。所以也没有运气。

然后我尝试了 Velocity。到目前为止，我在速度方面最幸运。它很好地提供了 html 文件，在遇到解析错误时不会停止，并允许我以与 InternalResourceViewResolver 相同的方式提供部分视图。然而，在遇到以$为前缀的角度变量时，Velocity 会尝试将它们解析为 VTL 变量，并在我的日志中填充类似

的消息

velocity - Null reference [template 'clients/createOrEdit.html', line 1, column 65] : $invalid cannot be resolved.

一切都按应有的方式正常运行，但我不是那种只会留下错误的人，而且我找不到禁用 VTL 的方法。

这是我目前使用视图解析器的经验。

我也有一个想法，使用mvc:resources 将 .html 文件视为静态资源（它们有点在 Angular 之前是魔法），但没有任何视图解析器，即使我设置了主布局，我的应用程序也无法启动.html 成为 web.xml 中的欢迎文件

我的问题是。我应该使用什么作为视图解析器，以便它与 angularjs 配合得很好，如果我什至应该使用视图解析器？

编辑：我正在尝试使用ContentNegotiatingViewResolver，我得到：

DEBUG ContentNegotiatingViewResolver - Requested media types are [text/html] based on Accept header types and producible media types [*/*])
DEBUG ContentNegotiatingViewResolver - No acceptable view found; returning null
DEBUG DispatcherServlet - Could not complete request
javax.servlet.ServletException: Could not resolve view with name 'layout.html' in servlet with name 'springDispatcherServlet'

webapp-config.xml（dispatcher servlet 中的上下文配置）

    <mvc:annotation-driven />

    <!-- Resources -->
    <mvc:resources location="/libs/" mapping="/libs/**" />
    <mvc:resources location="/css/" mapping="/css/**" />
    <mvc:resources location="/js/" mapping="/js/**" />
    <!-- Angular application data -->
    <mvc:resources location="/WEB-INF/appjs/" mapping="/appjs/**" />
    <!-- View locations -->
    <mvc:resources location="/WEB-INF/html/" mapping="/**"/>

    <!-- Controllers -->
    <context:component-scan base-package="com.mrplow.controller" />

    <!-- Views -->
    <util:map id="contentMediaTypes">
        <entry key="json" value="application/json" />
        <entry key="html" value="text/html" />
    </util:map>

<!--    <util:list id="defaultViews"> -->
<!--        <bean class="org.springframework.web.servlet.view.json.MappingJackson2JsonView" />       -->
<!--    </util:list> -->

    <bean id="viewResolver" class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver"
    p:order="1"
    p:ignoreAcceptHeader="false"
    p:defaultContentType="text/html"
    p:mediaTypes-ref="contentMediaTypes" /> 

LayoutController.java

@Controller
@RequestMapping("/")
public class LayoutController 

    @RequestMapping
    public String getIndexPage() 
        return "layout";
    

【参考方案1】：

为了在spring中使用静态资源(html,css,img,js)，使用如下目录结构：

src/
   package/
   LayoutController.java
WebContent/
   WEB-INF/
    static/
      html/
       layout.html
      images/
       image.jpg
      css/
       test.css
      js/
       main.js
     web.xml
    springmvc-servlet.xml



@Controller 
public class LayoutController 

 @RequestMapping("/staticPage") 
public String getIndexPage()  
return "layout.htm"; 

 



  <!-- in spring config file -->
 <mvc:resources mapping="/static/**" location="/WEB-INF/static/" />

layout.html

<h1>Page with image</h1>
<img src="/static/img/image.jpg"/>

请注意，您必须提及 /static/img/image.jpg 而不仅仅是 /image.jpg ..同样适用于 css 和 js。

或

您也可以使用内容协商视图解析器，如下所示：

 <bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
          <property name="order" value="1" />
          <property name="mediaTypes">
            <map>
               <entry key="json" value="application/json" />
               <entry key="xml" value="application/xml" />
               <entry key="rss" value="application/rss+xml" />
                <entry key="html" value="text/html"/>
            </map>
          </property>

          <property name="defaultViews">
            <list>
              <!-- JSON View -->
              <bean
                class="org.springframework.web.servlet.view.json.MappingJacksonJsonView">
              </bean>

Spring MVC 将使用“ContentNegotiatingViewResolver”（order=1）返回一个合适的视图（基于“mediaTypes”属性中声明的文件扩展名），如果不匹配，则使用“InternalResourceViewResolver”（ order=2) 返回一个默认的 JSP 页面。

<bean
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="order" value="2" />
        <property name="prefix">
            <value>/WEB-INF/pages/</value>
        </property>
        <property name="suffix">
            <value>.jsp</value>
        </property>
    </bean>

现在，您也可以从您的 jsp 重定向到您的静态 html 页面

   @Controller
    public class LayoutController 

        @RequestMapping("/index")
        public String getIndexPage() 
            return "index";
        

    

index.jsp

<form:form method="GET" action="/static/html/layout.html">

现在尝试通过http://yourapp.com//index 访问您的服务显示上述表单操作。它将显示layout.html

点击按钮或在jsp页面中提交调用layout.html页面

【讨论】：

谢谢。一个问题。媒体类型提到 xml - application/xml 。这也算 html 文件？

是的，您可以将它用于 html 。我已经更新了我的答案。请检查

我明白了。还有一个问题。它在哪里查找文件？它似乎无法找到我的观点。我将使用当前配置更新 OP

我已经更新了我的答案。请更新您的配置。希望它能解决您的问题！

我已经按照你说的做了，但我仍然遇到同样的错误。我也尝试将return "layout.html;" 更改为return "html/layout.html;" 但没有区别

【参考方案2】：

我认为 ContentNegotiatingViewResolver 是最好的视图解析器，因为您将能够将它与 Jackson2 集成以响应 JSON、XML 或 HTML 文本中的数据以及您需要的其他响应类型。

例如，看看这个方法。

http://hillert.blogspot.com.es/2011/01/rest-with-spring-contentnegotiatingview.html

【讨论】：

谢谢。一个问题。媒体类型提到 xml - application/xml 。这也算 html 文件？

我不知道我是否理解你的问题。但是 HTML 文件的内容类型是“text/html”而不是“application/xml”。在 google 中搜索，您可以找到所有资源的不同内容类型。另一方面，了解@RequestMapping 和消费/生产属性，用于在方法级别指定所有问题。

【参考方案3】：

对于寻找如何使用 ContentNegotiatingViewResolver 制作解决方案以在新版本的 Spring 中工作的人：

<bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
    <property name="order" value="1" />
    <property name="contentNegotiationManager" ref="contentNegotiationManager"/>
    <property name="defaultViews">
        <bean class="org.springframework.web.servlet.view.json.MappingJackson2JsonView"/>
    </property>
</bean>

然后在 ContentNegotiationManagerFactoryBean 中配置您需要的扩展：

<bean id="contentNegotiationManager" class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">
    <property name="mediaTypes">
        <props>
            <prop key="json">application/json</prop>
            <prop key="html">text/html</prop>
            <prop key="xml">application/xml</prop>
            // and so on
        </props>
    </property>

    <property name="ignoreAcceptHeader" value="true"/>
</bean>