angularjs css

Angular helps us build a great many things and the directives it provides make development much easier. Today we'll be looking at the and how we can use it to build a demo site to show off to others.

Angular帮助我们构建了很多东西，它提供的指令使开发变得更加容易。 今天，我们将研究以及如何使用它来构建一个演示站点向其他人炫耀。

We will be able to change out resources (like CSS) on the fly. We've all seen the WordPress theme demos where you can select different style options (colors, layout, etc). Here's an image of what we'll be building and be sure to check out the .

我们将能够即时更改资源（例如CSS）。 我们都看过WordPress主题演示，您可以在其中选择不同的样式选项（颜色，布局等）。 这是我们将要构建的图像，请务必查看该 。

Let's build it in Angular now!

让我们现在在Angular中构建它！

ngHref指令 (The ngHref Directive)

When creating links that have bound variables within it, it can cause problems for our users. For example, here's a link with a variable inside of it:

创建链接中包含绑定变量的链接时，这可能会对我们的用户造成问题。 例如，以下是其中包含变量的链接：

Facebook Page

This link could go to the wrong place if a user happens to click it before Angular gets a chance to change out the URL. The solution here is to use the ngHref directive.

如果用户在Angular有机会更改URL之前恰好单击了该链接，则该链接可能会到达错误的位置。 解决方案是使用ngHref指令。

Facebook Page

This way, the directive will make sure that all variables inside of the href tag are updated before the user has a chance to click.

这样，该指令将确保href标记内的所有变量在用户有机会单击之前得到更新。

Now let's look at a different scenario where we can use Angular to dynamically pull in CSS files.

现在让我们看一个不同的场景，我们可以使用Angular动态提取CSS文件。

建立我们的演示站点 (Building Our Demo Site)

Again, here's the of how we'll be changing out CSS on the fly to create a demo site. This technique could be used to change out any number of resources, from JS to CSS to links.

再次，这是我们如何更改CSS以创建演示站点的 。 该技术可用于更改从JS到CSS到链接的任何数量的资源。

This is also good to have since we can separate out experimental stylesheets for a project. For this project, we have a few different layouts that we want to try and see how it would look with different Bootstrap swatches from .

这样做也是一件好事，因为我们可以为项目分离出实验样式表。 对于此项目，我们想尝试一些不同的布局，以查看不同Bootstrap色板的 。

Let's write up our quick demo so we can see exactly how it works. We'll start with the Angular app since that will be an easy affair. We'll be pulling in CSS from ) and creating our own custom CSS files for the layouts.

让我们编写我们的快速演示，以便我们可以确切地了解其工作原理。 我们将从Angular应用程序开始，因为这很容易。 我们将从 CSS并为布局创建我们自己的自定义CSS文件。

角度模块 (Angular Module)

angular.module('linkApp', [])    .controller('mainController', function($scope) {      // set the default bootswatch name      $scope.css = 'cosmo';      // create the list of bootswatches      $scope.bootstraps = [        { name: 'Basic', url: 'cosmo' },        { name: 'Slate', url: 'slate' },        { name: 'Sandstone', url: 'sandstone' }      ];      // set the default layout      $scope.layout = 'normal';      // create the list of layout files      $scope.layouts = [        { name: 'Boring', url: 'normal' },        { name: 'Circles', url: 'circle' },        { name: 'In Your Face', url: 'large' }      ];    });

We have created a quick Angular module and controller where we define a list of both Bootstrap (we'll be switching out Bootswatch theme files) on the fly. We are also defining layouts that are custom CSS files that we have created for this project.

我们创建了一个快速的Angular模块和控制器，在其中我们定义了两个Bootstrap的列表（我们将切换出Bootswatch主题文件）。 我们还将定义布局，这些布局是我们为此项目创建的自定义CSS文件。

We have set our base styles also with $scope.css and $scope.layout. We'll use these in our HTML file.

我们还使用$scope.css和$scope.layout设置了基本样式。 我们将在HTML文件中使用它们。

查看文件 (The View File)

        
        
        
            
                
        
    
        
     
            
              
     
        
     
            
      
Bananas
            
      
This demo is just that.
        
     
    
    

The main part we want to look at here is how we pull in CSS files. This is a different example of using ng-href than we showed off earlier since we're using it on a link tag instead of the a tag. The effect is the same however.

我们在这里要看的主要部分是如何提取CSS文件。 这是使用ng-href的另一个示例，与之前展示的不同，因为我们在link标签而不是a标签上使用了它。 但是效果是一样的。

Notice how we are placing the {

{ css }} variable inside of the ng-href. We'll be using , under the Bootswatch tab, to grab our CSS files.

注意我们如何将{

{ css }}变量放置在ng-href 。 我们将在Bootswatch标签下使用来获取我们CSS文件。

Since we have already defined those variables, our site will use those by default. Next up, we have to give our user the ability to change out those variables so we'll be building dropdown selects to show off the options we created earlier.

由于我们已经定义了这些变量，因此我们的站点将默认使用这些变量。 接下来，我们必须使用户能够更改这些变量，因此我们将构建下拉选择以显示我们先前创建的选项。

提供用户输入 (Providing User Inputs)

We will need to give users the options to select a different theme or layout. We'll do this at the top of our HTML file and use another Angular directive, to display our two lists of resources.

我们需要为用户提供选择不同主题或布局的选项。 我们将在HTML文件的顶部执行此操作，并使用另一个Angular指令显示我们的两个资源列表。

At the top of our HTML file, after the opening <body> tag, add the following:

在我们HTML文件顶部，打开<body>标记之后，添加以下内容：

        
    
        
     
            
      
                
       Theme                
                                   
      
            
      
                
       Layout                
                   
      
        
     
    
    
    
    

Now we have the options necessary to change out the styles.

现在，我们有了更改样式所需的选项。

If you go ahead and select different Themes, they will immediately be applied to our site! The layouts won't change anything though since we haven't defined those styles yet. Let's do that now and change up the look and feel of our picture-thing div.

如果继续选择其他主题，它们将立即应用于我们的网站！ 由于我们尚未定义这些样式，因此布局不会发生任何变化。 让我们现在就开始做，改变一下我们的picture-thing div的外观。

CSS布局 (CSS Layouts)

These will be simple CSS files to show off how we can change the look and feel of our content quickly. Since the foundation is already set using ng-href and our list of options, once we create these files, everything will work!

这些将是简单CSS文件，以展示我们如何快速更改内容的外观。 由于已经使用ng-href和我们的选项列表设置了基础，因此一旦创建了这些文件，一切都会正常！

We'll be using CSS transitions and just some basic styling here that we won't go over in too much detail.

我们将使用CSS过渡以及这里的一些基本样式，这些细节我们将不再赘述。

layout-normal.css (layout-normal.css)

.picture-thing-img img { width:200px; }

layout-circle.css (layout-circle.css)

.picture-thing {    display: block;    width: 400px;    height: 400px;    overflow: hidden;    margin: 0 auto;    border-radius: 50%;}.picture-thing-img img {    max-width: 200%;}.picture-thing-content {    text-align: center;    color: #FFF;    transition: 0.3s ease all;    opacity: 0;}.picture-thing-content h2 {    font-size: 40px;}.picture-thing-content p {    font-size: 25px;}.picture-thing: hover .picture-thing-content {    transform: translateY(-375%);    opacity: 1;}

layout-large.css (layout-large.css)

.picture-thing {    display: block;    width: 400px;    height: 400px;    overflow: hidden;    margin: 0 auto;    border-radius: 50%;}.picture-thing-img img {    max-width: 200%;}.picture-thing-content {    text-align: center;    color: #FFF;    transition: 0.3s ease all;    opacity: 0;}.picture-thing-content h2 {    font-size: 40px;}.picture-thing-content p {    font-size: 25px;}.picture-thing: hover .picture-thing-content {    transform: translateY(-375%);    opacity: 1;}

Now we have all three of our stylesheets and setup necessary to have a working demo site. Go back into your site and just try changing a few things. You'll see them change quickly as it grabs the new stylesheets.

现在，我们已经拥有了所有三个样式表和设置，这些模板和设置是运行演示站点所必需的。 返回您的站点，然后尝试更改一些内容。 您将看到它们随着新样式表的变化而Swift变化。

结论 (Conclusion)

Using one of the built in Angular directives, we are able to build in some cool and quick functionality. There are plenty of uses for this whether it be showcasing a site to a client and trying out different styles or maybe creating an interactive site that pulls in any number of different resources.

使用内置的Angular指令之一，我们可以构建一些凉快的功能。 这样做有很多用途，无论是向客户展示网站并尝试不同的样式，还是创建可引入许多不同资源的交互式网站。

For more info on Angular directives, here are some other articles detailing a few:

有关Angular指令的更多信息，这是其他一些文章，其中详细介绍了一些：

翻译自:

angularjs css