Question

我正在阅读一些教程以更好地学习angularJS，但我似乎无法让我的外部CSS申请。我可以同时应用内联和内部css，但看起来外部是不可能的。过去有没有人有类似的问题？

我的HTML看起来像

    <head>
    <title>Learing angular</title>

    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"></link>
    <style href="style.css" rel="stylesheet"></style>
</head>
<body ng-app="MyApp">

    <div id="menuBar">
        <nav class="{{active}}" ng-click="$event.preventDefault()">
            <a href="#" class="home" class="menu" ng-click="active='home'">Home</a>
            <a href="#" class="projects" class="menu" ng-click="active='projects'">Projects</a>
            <a href="#" class="map" class="menu" ng-click="active='map'">Map</a>
            <a href="#" class="threeJS" class="menu" ng-click="active='threeJS'">ThreeJS</a>
        </nav>
        <p ng-hide="active" style="font-size: 26px">the variable active is null</p>
        <p ng-show="active" id="section">You are in the {{active}} section</p>
    </div>

    <div class="content" ng-show="active == 'home'" ng-controller="MainController" style="text-align: center;">
        <input type="text" ng-model="inputValue" />
        <p>{{inputValue}}</p>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="Controllers.js"></script>
</body>

我的css看起来像

    #menuBar {
    font-size: 24px;
    text-align: center;
}

#section {
            font-weight: bold;
            font-size: 26px;
}

nav{
    display:inline-block;
    margin:60px auto 45px;
    background-color:#5597b4;
    box-shadow:0 1px 1px #ccc;
    border-radius:2px;
}

没有什么花哨的，只是超级简单的东西，但我正在画一个空白，为什么我可以使用外部CSS。谢谢你的帮助。

Answer 1

使用样式标记而不是链接标记来加载css文件。

<head>
    <title>Learing angular</title>

    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>

外部css没有应用于角度项目

1 个答案: